Next Owl Carousel

1.Installation

npm install --save next-owl-carousel

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>

import { useRef } from 'react';
import OwlCarousel from 'next-owl-carousel';

2.Usage

const carouselRef = useRef(null);

const options = {
  loop: true,
  responsiveClass: true,
  dots: false,
  autoplay: true,
  responsive: {
    0: { items: 1, dots: true },
    768: { items: 2 },
  },
};

const events = {
  onDragged: function (event) {
    console.log('====onDragged===>>', event);
  },
  onChanged: function (event) {
    console.log('====onChanged===>>', event);
  },
};

<OwlCarousel ref={carouselRef} options={options} events={events} className="owl-carousel">
  <div className="item"><img src="/img/fullimage1.jpg" alt="item1" /></div>
  <div className="item"><img src="/img/fullimage1.jpg" alt="item2" /></div>
  <div className="item"><img src="/img/fullimage1.jpg" alt="item3" /></div>
</OwlCarousel>

3. Methods

Previous

<button onClick={() => carouselRef?.current?.prev()}>prev</button>

Next

<button onClick={() => carouselRef?.current?.next()}>prev</button>

goTo(page)

<button onClick={() => carouselRef?.current?.goTo(0)}>prev</button>

Reference https://www.npmjs.com/package/react-owl-carousel2

Hi there, I'm Anmol 👋