Temkit/react-hook-carousel

the lightest carousel you'll ever need

React Hook Carousel

the lightest carousel you'll ever need

Demo

https://react-hook-carousel.now.sh/

Package Managers

# NPM
npm install react-hook-carousel

Settings

Option	Type	Default	Description
Items	Array		Array of elements containing images to slide. each element is an object containing two attributes, src and alt
groupBy	number	null	the number of slider to show
effect	string	fade	the effect used to slide
showDots	boolean	false	show dots
showButton	boolean	false	show previous and next dots

How to use

Array Format Local images

const slider = [
  { image: require("./images/slider/slider1.jpg"), alt: "alt image1" },
  { image: require("./images/slider/slider2.jpg"), alt: "alt image2" },
  { image: require("./images/slider/slider3.jpg"), alt: "alt image3" },
  { image: require("./images/slider/slider4.jpg"), alt: "alt image4" },
  { image: require("./images/slider/slider5.jpg"), alt: "alt image5" },
  { image: require("./images/slider/slider6.jpg"), alt: "alt image6" }
];

Array Format Remote images

const slider = [
  {
    image: "https://s3.amazonaws.com/bucket/images/slider/slider1.jpg",
    alt: "alt image1"
  },
  {
    image: "https://s3.amazonaws.com/bucket/images/slider/slider2.jpg",
    alt: "alt image2"
  },
  {
    image: "https://s3.amazonaws.com/bucket/images/slider/slider3.jpg",
    alt: "alt image3"
  },
  {
    image: "https://s3.amazonaws.com/bucket/images/slider/slider4.jpg",
    alt: "alt image4"
  }
];

One Item to slide:

<Carousel items={slider} groupBy={false} showDots={false} effect="fade" />

Multiple Items to slide

<Carousel items={slider} groupBy={5} showDots={false} effect="fade" />

License

Copyright (c) 2020 Temkit Sidali

Licensed under the MIT license.

Free as in free Beer.