Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
owl carouselReactjs

How to integrate owl carousel in react js?

Integrate owl carousel in react js

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:

owl-carousel-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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

17 Comments

Leave a Reply

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