DEV Community

Cover image for How to use React-owl-carousel in 2025
Ifeanyi Chima
Ifeanyi Chima

Posted on • Edited on

How to use React-owl-carousel in 2025

#webdev #javascript #beginners #programming

While I was working on creating a website. I wanted to implement a sliding carousel feature.

Image description

I love Owl Carousel, so I settled on using it.

Installation

You need to install packages such as @rollup and react-owl-carousel



npm i react-owl-carousel @rollup/plugin-inject
Enter fullscreen mode Exit fullscreen mode

jQuery

You need to inject jQuery into the project. If you are using vite, which is a javascript bundler, here is how you do it.

This should be done in your config.js




import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject';
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [

    react(),

    inject({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),

  ],
})
Enter fullscreen mode Exit fullscreen mode

App.jsx

You need to make jQuery available to the entire App/Project




import './App.css'
import * as $ from "jquery" // ---> this line
import Header from "./components/Header"
import Hero from "./components/Hero"

function App() {


  return (
    <>
      <Header />
      <Hero />
      <Simple />
      <Footer />
    </>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Image description

Owl Carousel CSS

You need to link the owl-carousel css code in your main.jsx 




import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import 'owl.carousel/dist/assets/owl.carousel.css'; {/* this line */}
import 'owl.carousel/dist/assets/owl.theme.default.css'; {/* this line */}
Enter fullscreen mode Exit fullscreen mode

Component

You can use the Owl carousel component in your React component. You pass in options to modify how the component behaves.




import OwlCarousel from 'react-owl-carousel';


const Features = () => {

  const options = {
    responsive: {
      0: {
        items: 1,
      },
      400: {
        items: 1,
      },
      600: {
        items: 1,
      },
      700: {
        items: 1,
      },
      800: {
        items: 2,
      },
      1000: {
        items: 3,
      }
    },
    nav: false,
    dots: true
  }


  return (
    <OwlCarousel className='owl-theme section' loop margin={20} autoplay {...options}>

      {/* 1 */}
      <div className="review item">
        <h3>24 hour up-time</h3>
        <p>The API will always be available with zero latency and little to no down-time</p>
        <div className="review-img">
          <img src="/trust.svg" alt=""/>
        </div>
      </div>

      {/* 2 */}
      <div className="review item">
        <h3>Global coverage</h3>
        <p>View the latest live exchange rates for all the crypto-currencies available worldwide.</p>
        <div className="review-img">
          <img src="/globe.svg" alt="" />
        </div>
      </div>


      {/* 3 */}
      <div className="review item">
        <h3>Great Documentation</h3>
        <p>To assist developers, we have curated a world-className documentation for the API</p>
        <div className="review-img">
          <img src="/shield.svg" alt="" className="trust" />
        </div>
      </div>
    </OwlCarousel>
  )
}

export default Features
Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

Thank you, Please follow me

HTML GitHub

Top comments (2)

Collapse
 
iamdipankarpaul profile image
Dipankar Paul •

I also use owl this but autoplay is not working. Do you know why?

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: ReactOwlCarousel2
Enter fullscreen mode Exit fullscreen mode

I am getting this error

Collapse
 
ifeanyichima profile image
Ifeanyi Chima •

The issue comes from the library or package (React-owl-carousel). We need to wait for their developers to make the necessary updates or correction.

Read next

gladiatorsbattle profile image

Building a Highly Reactive Page in React: A Deep Dive into Gladiator Crash

Gladiators Battle -

fahaddevs profile image

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz -

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

mikeyoung44 profile image

A beginner's guide to the Stable-Diffusion-V1-4 model by Compvis on Huggingface

Mike Young -