https://github.com/anmolsukki/next-owl-carousel

https://github.com/anmolsukki/next-owl-carousel

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/anmolsukki/next-owl-carousel
• Owner: anmolsukki
• Created: 2024-02-17T19:55:17.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-09-30T06:30:01.000Z (7 months ago)
• Last Synced: 2024-11-25T07:02:36.577Z (5 months ago)
• Language: JavaScript
• Size: 44.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Next Owl Carousel

#### 1.Installation

```script

npm install --save next-owl-carousel

```

```html

```

```jsx

import { useRef } from 'react';

import OwlCarousel from 'next-owl-carousel';

```

### 2.Usage

```jsx

const carouselRef = useRef(null);

```

```jsx

const options = {

  loop: true,

  responsiveClass: true,

  dots: false,

  autoplay: true,

  responsive: {

    0: { items: 1, dots: true },

    768: { items: 2 },

  },

};

```

```jsx

const events = {

  onDragged: function (event) {

    console.log('====onDragged===>>', event);

  },

  onChanged: function (event) {

    console.log('====onChanged===>>', event);

  },

};

```

```jsx

  


  


  


```

### 3. Methods

Previous

```jsx

 carouselRef?.current?.prev()}>prev

```

Next

```jsx

 carouselRef?.current?.next()}>prev

```

goTo(page)

```jsx

 carouselRef?.current?.goTo(0)}>prev

```

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

---

### Hi there, I'm [Anmol](https://www.linkedin.com/in/anmolsukki/) 👋

[![CodeSandbox](https://img.shields.io/badge/Codesandbox-000000?style=flat-round&logo=CodeSandbox)](https://codesandbox.io/u/anmolsukki)   

[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=flat-round&logo=discord&logoColor=white)](https://discord.gg/zMkSphwHjE)   

[![Linkedin](https://img.shields.io/badge/-LinkedIn-blue?style=flat-round&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/anmolsukki/)](https://www.linkedin.com/in/anmolsukki/)   

[![facebook](https://aleen42.github.io/badges/src/facebook.svg)](https://www.facebook.com/Anmolsukki/)   

[![twitter](https://aleen42.github.io/badges/src/twitter.svg)](https://twitter.com/anmolsukki)   

[![Instagram](https://img.shields.io/badge/-Instagram-e4405f?style=flat-round&logo=Instagram&logoColor=white)](https://www.instagram.com/anmolsukki/)   

[![slack](https://aleen42.github.io/badges/src/slack.svg)](https://join.slack.com/t/anmolsukki/shared_invite/zt-k7cfber5-JVl_kGaNdNqvwsMADPiUWg)   

[![stackoverflow](https://aleen42.github.io/badges/src/stackoverflow.svg)](https://stackoverflow.com/users/10825957/anmol-kumar-singh)