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: alt: "alt image1" image: alt: "alt image2" image: alt: "alt image3" image: alt: "alt image4" image: alt: "alt image5" image: 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.