@chuck-durst/react-carousel

    1.1.4 • Public • Published

    react-carousel (1.1.4)

    A simple and powerful carousel for React.

    Installation

    yarn add @chuck-durst/react-carousel or npm i -s @chuck-durst/react-carousel

    Introduction

    react-carousel has been designed to work on both mobile and desktop. It comes with a lot of configurations to make it feet to any type of design.

    react-carousel works with the background-image property which makes it fully responsive!

    Usage

    All you have to do is importing the component to your project and specifying your slides!.

    import React from 'react'
     
    import ReactCarousel from '@chuck-durst/react-carousel'
     
    const App = (props) => {
        return (
            <ReactCarousel slides={ props.slides } />
        )
    };
     

    checkout the demo for a better example of how to use it!

    Props

    Property Type Description Default value
    slides array Contains yours slides urls. (required) -
    className String The class name of the main component ce-carousel
    showArrows bool Defines if the navigation arrows must be showed true
    showDots bool Defines if the pagination dots must be showed true
    autoPlay bool Enables the automatic play false
    autoPlayDelay int The delay between each slide in autoPlay in ms 5000
    slidesSpeed int The slides movement speed in ms 150
    isInfinite bool Defines if the slider is infinite true
    isAnimated bool Defines if the slides should be animated true
    stopOnHover bool Allows you to stop the autoPlay when the component is hovered false
    slideNavigation bool Allows sliding on mobile and desktop true
    allowKeyboard bool Allows you to navigate using your keyboard arrows true
    customNextArrow React Element A custom arrow element (if you need inspiration you can take a look at the original element: src/NextArrow) -
    customPrevArrow React Element A custom arrow element (if you need inspiration you can take a look at the original element: src/PrevArrow) -
    customDots function A function used to map the pagination dots which takes two parameters (index, isActive) to let you fully customize the pagination (take a look at the original element: src/Dot) -
    beforeChange function A callback called before each slides changes (the first parameter corresponds to the index of the current active slide) -
    afterChange function A callback called after each slides changes (the first parameter corresponds to the index of the new active slide. The second parameter contains the slide direction) -
    goToSlide int Allows you to go to a defined slide null
    backdropColor string The component background-color. Can be any css color property null
    sliderClassName string The className of the slider element ce-carousel__slider
    slidesClassName string The className of the slides element ce-carousel__slide

    Take a look at the demo folder if you are stuck! :)

    License

    react-carousel is released under the MIT license.

    Contribute

    Feel free to contribute to this project if you know how to make it be better.

    Install

    npm i @chuck-durst/react-carousel

    DownloadsWeekly Downloads

    2

    Version

    1.1.4

    License

    MIT

    Last publish

    Collaborators

    • chuck-durst