Mundu React Carousel

Very light weight carousel for React Web. No dependencies

install

$ npm install mundu-react-carousel --save

Demo

https://ajithkumarvm.github.io/mundu-react-carousel/

Props

{
        width: '100%', // width can be integer/pixel/percentage
        maxWidth: 500, // maxWidth should be set for desktop and width for mobile
        height: 360, // height is mandatory. All child maintaining this height is ideal
        arrows: true, // show arrows
        arrowSize: 15, // size of the arrow
        arrowColor: 'white', // hash codes/rgba
        extendedStyles: null, // expects js styles (object) for wrapper
        className: null, // css class for wrapper
        dots: true, // show dots(bool)
        dotStyle: null, // js styles for dots
        dotsClass: null, // className for dots wrapper
        dotClass: null, // className for each dot
        autoPlay: true, // enable/disable auto play
        autoPlayDuration: 3000, // duration of a slide
        onClick: (index) => {}, // gives the index of the current slide
        swipePixels: 50, // sensitivity to swipe in px
        slideTime: 300, // Time taken to slide in ms
        rotateSlides: true, // set false to block the transition from end to start
        onSlided: (index) => {}, // triggered when slide transition is completed
        dotsWithArrows: true // shows arrows near the dots
}

Usage

import MunduCarousel from 'mundu-react-carousel';
<MunduCarousel maxWidth={500} height={350}>
    <children1 />
    <children2 />
    <children3 />
</MunduCarousel>

Tip 1: Swipe on mobile

Swipe will work on mobile browser or check mobile view in Chrome dev tools.

Tip 2: Image Flickering issue

If images in slides are flickering after sliding. Set image file header Cache-Control: max-age=1535272 in your cdn or files server. Or host your images in https://imgur.com

Author

Ajith Kumar VM (ajithkumarvm@gmail.com)