How to integrate owl carousel in reactjs latest versions?

·

reactjs

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.

Comments

9 responses to “How to integrate owl carousel in reactjs latest versions?”

  1. Richard Martinez Avatar
    Richard Martinez

    Hi, how do you pass options to the component? You have 4 items in options, but only 3 are displayed.

    Thank you.

    1. Ajay Malhotra Avatar

      Hi, did you check the working video? It is showing 4 items, when you will press on pagination then.

      Thank you

      1. Anisha Yadav Avatar
        Anisha Yadav

        i am unable to use images more than 3, infact i am uable to change this

        1. Ajay Malhotra Avatar

          I will update you sooner and I will share the updated link after sometime, Thanks.

          1. Anisha Yadav Avatar
            Anisha Yadav

            Thankyou, for your reply.

            1. Ajay Malhotra Avatar

              You are welcome.

  2. Abdullah Avatar
    Abdullah

    HI. I have some issue that I want to use the RTL when the locale is Arabic so I need a way to do that and use it with if statement

    1. Ajay Malhotra Avatar

      I will update you on this, thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.