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.