React-light-carousel NPM

React-Light-Carousel

A light weight react based carousel for multiple purposes.

Features

Autoplay
Infinite mode
Responsive (all the breakpoints you need)
Custom buttons

Install

  npm i react-light-carousel

Basic usage

const BasicCarousel = () => {
  return (
    <LightCarousel gap={20} showControls>
      <span>slide 1</span>
      <span>slide 2</span>
      <span>slide 3</span>
    </LightCarousel>
  );
}

Responsive example

const breakpoints = {
  0: 1, // Show 1 slide for default
  400: 2, // Show 2 slides after 400px
  1000: 4,  // Show 4 after 1000px
}

const ResponsiveCarousel = () => {
  return (
    <LightCarousel gap={20} responsive={breakpoints} showControls>
      <span>slide 1</span>
      <span>slide 2</span>
      <span>slide 3</span>
    </LightCarousel>
  );
}

Props

Name	Type	Default	Descrption
slidesToShow	number	1	The number of slides to show at the same time
setSlide	number	0	To set the slide you want to be focused (you can use it to set an initial slide)
gap	number	0	The space between each slide
autoplay	boolean	false	The slideshow starts moving automatically
speed	number	3000	The speed of the autoplay
stopOnHover	boolean	true	When true, stops the autoplay temporarily when the mouse is over the slideshow
infinite	boolean	false	Makes the slideshow restart the slides when reaching the end
showControls	boolean	false	To show the previous and next slide buttons
prevBtn	string or component	'prev'	The previous slide button
nextBtn	string or component	'next'	The next slide button
responsive	object	{}	You can pass an object to tell the slideshow how many slides to show on a given breakpoint (in pixels)
onPreviousSlide	function	() => {}	Callback when it finish sliding to previous slide
onNextSlide	function	() => {}	Callback when it finish sliding to next slide