Home owl carousel How to integrate owl carousel in react js?

How to integrate owl carousel in react js?

by therichpost
Published: Last Updated on 17 comments
reactjs

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.

You may also like

17 comments

Ade September 2, 2019 - 1:58 pm

Hello,

Thanks for your straight forward explanation.

I have followed the steps above, but I get an error; TypeError: undefined is not an object (evaluating ‘$.fn’)

Kindly help.

Reply
Ajay Malhotra September 2, 2019 - 4:30 pm

Remove slim.min.js file from index.html file.

Thank you

Reply
kaptan November 15, 2019 - 5:17 am

can u elaborate it plz i am facing issue in using owl carousel with react js it is takings its default css and looks wiered in my component

Reply
Ade September 3, 2019 - 9:31 am

I just did, as you suggested but the issue persists. Thanks.

I removed this;

I’m left with just these;

Reply
Ajay September 3, 2019 - 9:38 am

I did not get you, your issue has been resolved or not?

Reply
Ade September 9, 2019 - 11:02 am

Sorry, I had inserted code snippets, to give context, but these were auto-deleted on posting my reply. Now, what I’d meant was I did as you suggested, but errors still persist.

Reply
Ajay Malhotra September 9, 2019 - 4:08 pm

Hi you can email me on therichposts@gmail.com

Thank you

Reply
Dexdee October 28, 2019 - 10:17 am

TypeError: Cannot read property ‘fn’ of undefined

(anonymous function)
C:/test/node_modules/react-owl-carousel/umd/OwlCarousel.js:1808
1805 | */
1806 |
1807 |
> 1808 | $.fn.owlCarousel = function (option) {
| ^ 1809 | var args = Array.prototype.slice.call(arguments, 1);
1810 | return this.each(function () {
1811 | var $this = $(this),

Reply
Ajay Malhotra October 28, 2019 - 10:20 am

react version?

Reply
Dexdee October 28, 2019 - 10:29 am

“dependencies”: {
“jquery”: “^3.4.1”,
“react”: “^16.11.0”,
“react-dom”: “^16.11.0”,
“react-owl-carousel”: “^2.3.1”,
“react-scripts”: “3.2.0”,
“utf8”: “^3.0.0”
},

Reply
Ajay Malhotra October 28, 2019 - 10:32 am

React latest version you have and I will also share post related to this. wait for some time. For more information you can contact me.

Reply
Aslam October 27, 2020 - 5:16 pm

is there any example to load item dynamically by server API

Reply
Ajay Malhotra October 27, 2020 - 5:21 pm

I will update it, thanks.

Reply
Ajeet August 30, 2021 - 10:11 am

How to make responsive.

Reply
Ajay Malhotra August 30, 2021 - 10:13 am

Here please check the responsive example:
https://therichpost.com/reactjs-owl-carousel-working-tutorial/

Reply
Gaurav January 8, 2022 - 9:57 am

what does items:4 does?

Reply
viswa January 17, 2023 - 11:33 am

Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(…) is not a function
at useScript (App.js:45:1)
at App (App.js:58:1)
at renderWithHooks (react-dom.development.js:16312:1)
at mountIndeterminateComponent (react-dom.development.js:20081:1)
at beginWork (react-dom.development.js:21594:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4170:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4221:1)
at invokeGuardedCallback (react-dom.development.js:4283:1)
at beginWork$1 (react-dom.development.js:27459:1)
at performUnitOfWork (react-dom.development.js:26564:1)

l am covert html css owl carousul to react
this problem

Reply

Leave a Comment

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