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.
Leave a Reply