Home Reactjs How to integrate owl carousel in reactjs latest versions?

How to integrate owl carousel in reactjs latest versions?

by therichpost
9 comments
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.

You may also like

9 comments

Richard Martinez January 10, 2020 - 5:59 pm

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

Thank you.

Reply
Ajay Malhotra January 11, 2020 - 7:16 am

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

Thank you

Reply
Anisha Yadav May 5, 2021 - 8:44 am

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

Reply
Ajay Malhotra May 5, 2021 - 8:46 am

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

Reply
Anisha Yadav May 6, 2021 - 2:25 am

Thankyou, for your reply.

Ajay Malhotra May 6, 2021 - 2:53 am

You are welcome.

Abdullah September 19, 2021 - 5:19 am

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

Reply
Ajay Malhotra September 20, 2021 - 3:58 am

I will update you on this, thanks.

Reply

Leave a Comment

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