0.0.20 • Published 5 years ago
mundu-react-carousel v0.0.20
Mundu React Carousel
Very light weight carousel for React Web. No dependencies
install
$ npm install mundu-react-carousel --save
Demo
https://ajithkumarvm.github.io/
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 maintaing this height is ideal
arrows: true, // show arrows
arrowSize: 15, // size of the arrow
arrowColor: 'white', // hashcodes/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 autoplay
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)
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago