Package Exports
- react-slick
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-slick) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-slick
Carousel component built with React. It is a react port of slick carousel
Installation
npm install react-slick
Also install slick-carousel for css and font
bower install slick-carousel
Demos
Starter Kit
Checkout yeoman generator to quickly get started with react-slick.
Example
var React = require('react');
var Slider = require('react-slick');
var SimpleSlider = React.createClass({
render: function () {
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<Slider {...settings}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</Slider>
);
}
});
Property | Type | Description | Working |
---|---|---|---|
className | String | Additional class name for the inner slider div | Yes |
adaptiveHeight | |||
arrows | bool | Should we show Left and right nav arrows | Yes |
autoplay | bool | Should the scroller auto scroll? | Yes |
autoplaySpeed | int | delay between each auto scoll. in ms | Yes |
centerMode | bool | Should we centre to a single item? | Yes |
centerPadding | |||
cssEase | |||
dots | bool | Should we show the dots at the bottom of the gallery | Yes |
dotsClass | string | Class applied to the dots if they are enabled | Yes |
draggable | bool | Is the gallery scrollable via dragging on desktop? | Yes |
easing | string | ||
fade | bool | ||
focusOnSelect | bool | ||
infinite | should the gallery wrap around it's contents | Yes | |
initialSlide | int | which item should be the first to be displayed | Yes (since pull req #17) |
responsive | |||
rtl | bool | ||
slide | string | ||
slidesToShow | int | Number of slides to be visible at a time | Yes |
slidesToScroll | int | Number of slides to scroll for each navigation item | |
speed | int | ||
swipe | bool | ||
swipeToSlide | bool | ||
touchMove | bool | ||
touchThreshold | int | ||
variableWidth | bool | ||
vertical | bool | ||
afterChange | function | callback function called when the current index changes | Yes (since pull req #17) |