react-blaze-carousel v0.1.0

Features 🎆

1. Responsive carousel slider
2. Multiple slides in slide window
3. Autoplay with interval control
4. No need to add any stylesheet
5. Lightweight

Installation

$ npm i react-blaze-carousel

Or

$ yarn add react-blaze-carousel

Docs 📕

Props & Options

• gap If gap is true there will be gap between slides

• onSlideChange On slide change event will be executed when one slide will be changed

• autoplay Carousel to move to next slide automatically

• children React Child Nodes, basically list of components, that will act as slide

• interval Interval between autoplay, to interval work, autoplay must be true

• buttonClassName Slide change button classname

• slidesInViewport How many slides will be shown in the viewport, it can be a number or an object of breakpoints

    <Carousel 
    slidesInViewport={{
        xxl: 6,
        xl: 5,
        lg: 4,
        md: 3,
        sm: 2,
        xs: 1,
        base: 1  
  }}>
    ...
    </Carousel>

the breakpoint option, not each one is required

it can be a number as well, which will work for every screen orientation

<Carousel slidesInViewport={4}>
...
</Carousel>

Example

import Carousel from "react-blaze-carousel";


<Carousel gap slidesInViewport={2}>
    <div>
        <h1>
            Flex box 1
        </h1>
    </div>
    <div>
        <h1>
            Flex box 2
        </h1>
    </div>
    <div>
        <h1>
            Flex box 3
        </h1>
        
    </div>
</Carousel>