Hello to all, welcome to therichpost.com. Today In this post, I will tell you, How to integrate owl carousel in reactjs latest versions?
Very first, you need to setup reactjs on your machine so for that please check below working link:
install-reactjs
1. After setup Reactjs on your system run below command to install owl carousel on your reactjs application:
npm install --save react-owl-carousel
2. Now add below code into your src/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 alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> <div class="item"> <img alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> <div class="item"> <img alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> <div class="item"> <img alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> <div class="item"> <img alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> <div class="item"> <img alt="img1" src="https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/model/aventador/aventador-svj-roadster/car/SVJ_Roadster_gateway%20modelli.png"/></div> </OwlCarousel> ) } } ReactDOM.render(<Hello />, document.getElementById('root'));
3. Now add below code into public/index.html file:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
This is it and if you have any query then please comment below.
Jassa
Thank you.
Leave a Reply