react-slim-carousel

Minimal but feature-rich react carousel made using hooks.

Install

npm install --save react-slim-carousel

Demo

Usage

import React from 'react'

import {
  Carousel,
  CarouselProvider,
  Dots,
  PreviousButton,
  NextButton
} from 'react-slim-carousel'
import 'react-slim-carousel/dist/index.css'

export default function Example() {
  return (
    <CarouselProvider>
      <Carousel>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
      </Carousel>
      <Dots />
      <PreviousButton>Previous</PreviousButton>
      <NextButton>Next</NextButton>
    </CarouselProvider>
  )
}

Alternatively, you can use the HOC approach by wrapping your component in withCarousel()(Component). You should not use the <CarouselProvider> when using the HOC approach.

import React from 'react'

import { Carousel, withCarousel, useCarousel } from 'react-slim-carousel'
import 'react-slim-carousel/dist/index.css'

function Example() {
  const { currentSlide } = useCarousel()

  return (
    <>
      <Carousel>{/* Slides here */}</Carousel>
      <span>Current slide: {currentSlide}</span>
    </>
  )
}

export default withCarousel()(Example)

Options

Setting	Type	Description	Default
autoPlay	boolean	Autoplay through slides	false
autoSize	boolean	Set the height (or width) to the largest slide depending on the orientation	true
centerMode	boolean	Show active slide in the center	false
draggable	boolean	Enable/disable drag to slide	true
easing	string	CSS easing	'ease-in-out'
edgeFriction	number	Resistance when swiping edges of non-infinite carousels	0.3
gap	number	Gap in pixels between each slide	0
infinite	boolean	Intinite loop sliding	false
initialSlide	number	Initial slide to display	0
interval	number	Time in ms between autoplay sliding	3000
orientation	'horizontal' | 'vertical'	Slider orientation	'horizontal'
playDirection	'normal' | 'reverse'	Autoplay direction	'normal'
slidesToScroll	number	Number of slides to scroll	1
slideSpeed	number	Transition speed in ms	400
threshold	number	Drag threshold for scrolling to next slide	0.2
visibleSlides	number	Number of slides visible	1

Responsive

The Carousel component accepts an additional prop responsive which is an object with the keys being the pixel min width, and the value being settings to override.

Example:

<Carousel
  visibleSlides={2}
  responsive={{
    768: {
      visibleSlides: 4
    }
  }}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</Carousel>

Styling

The bare minimum stylesheet should be imported from 'react-slim-carousel/dist/index.css'. Styles for the previous/next buttons and dots are not included and should be done by your app.

Available classes:

Carousel

Class	Description
carousel	Base class
carousel--horizontal	When orientation is set to 'horizontal'
carousel--vertical	When orientation is set to 'vertical'
carousel--center-mode	When centerMode is enabled

Tray

The tray is the direct child of the carousel and contains the slides.

Class	Description
carousel__tray	Base class

Slide

Class	Description
carousel__slide	Base class
carousel__slide--active	When the slide is currently active

Previous button

Class	Description
carousel-previous-btn	Base class

Next button

Class	Description
carousel-next-btn	Base class

Dots

Class	Description
carousel-dots	Base class

Dot

Class	Description
carousel-dot	Base class
carousel-dot--active	When current dot is active

License

MIT © Acidic9