react-zippy-carousel

React hook for carousels. Supports gestures in mobile browsers. - uses css animations - renders only 3 slides at any given time - supports autoplay, gestures and snap to reset - very light weight

Usage no npm install needed!

<script type="module">
  import reactZippyCarousel from 'https://cdn.skypack.dev/react-zippy-carousel';
</script>

README

react-zippy-carousel npm version

React hook for carousels. Supports gestures in mobile browsers.

  • uses css animations
  • renders only 3 slides at any given time
  • supports autoplay, gestures and snap to reset
  • very light weight

Demo

alt text

Installation

yarn add react-zippy-carousel or npm install --save react-zippy-carousel

Usage

import useCarousel from 'react-zippy-carousel';

const {
  handlers, // Listeners for 'li's
  listHandlers, // listeners for 'ul'
  offset, // scroll position for 'ul'
  withAnimation, // whether you need to animate the offset
  slideNext, // slide to next
  slidePrev, // slider to previous
  slides, // slides you want to render
  current // current slide of the carousel  
} = useCarousel({
  list: ['#98ddca', '#d5ecc2', '#ffd3b4', '#ffaaa7'],
  carouselContainerRef,
});

Example

demo project

License

MIT License. © Harshana Abeyaratne