How to integrate owl carousel in react js?

Friends here is new update code: https://therichpost.com/reactjs-owl-carousel-working-tutorial/

Hello, welcome to therichpost.com. In this post, I will tell you, How to integrate owl carousel in react js? Reactjs is a Javascript Library to build user interface.

In my older posts, I told you, how to install reactjs, for this, you can check the below link:

https://therichpost.com/install-reactjs-easy-simple

For integrate owl carousel is reactjs, I have used react-owl-carousel package and you can install this package to your reactjs app with below command:

npm install --save react-owl-carousel

Here is the working owl carousel  image in reactjs:

Here is working code for Integrate owl carousel in react js and you can add this into your index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
const options = {
    items: 4,
};
class Hello extends React.Component{
  render()
  {
    return (
    <OwlCarousel
    className="owl-theme"
    loop
    margin={10}
    nav
>
     <div class="item"><img src="1.jpg"/></div>
     <div class="item"><img src="2.jpg"/></div>
     <div class="item"><img src="3.jpg"/></div>
     <div class="item"><img src="4.jpg"/></div>
           <div class="item"><img src="5.jpg"/></div>
</OwlCarousel>
    )
  }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

 Here is the jquery script and you need to add your index.html file head tag:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

If you have any query related to this post then please do comment below and I will come with reactjs posts.