react-slicker v0.10.1

react-slicker

Carousel component built with React. It is a react port of slick carousel

And a fork of the awesome react-slick

which extends the slick props to support setting the current slide and handle clicks on the carousel arrows.

For React 0.12 or below version support, please stick with react-slick@0.7.2

Road to 1.0

react-slicker is under active development now. Soon this project will have all the features of slick carousel. We encourage your feedback and support.

Installation

  npm install react-slicker

Also install slick-carousel for css and font

  bower install slick-carousel

or add cdn link in your html

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.css" />

Demos

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>
    );
  }
});

Development

Want to run demos locally

git clone https://github.com/akiran/react-slick
npm install
npm start
open http://localhost:8000

Polyfills for old IE support

matchMedia support from media-match