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.

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

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.


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',
    }),

  ],
})

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

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';
import 'owl.carousel/dist/assets/owl.theme.default.css';

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