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.