How to use React-owl-carousel in 2025
Tags: webdev, javascript, beginners, programming
Published: 2024-06-07 09:18:02

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7rnevx9jeeck9gwvn0q.gif)

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.

```javascript

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

```javascript

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
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fplf4ygogbaso7gns9qp.gif)

**Owl Carousel CSS**

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

```css

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.


```javascript

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


```



<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

**Thank you, Please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)