React-slim-carousel NPM

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.