# react-slick

**Repository Path**: mirrors_mathisonian/react-slick

## Basic Information

- **Project Name**: react-slick
- **Description**: React carousel component 
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2026-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-slick
Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/)

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

### Installation
```bash
  npm install react-slick
```
Also install slick-carousel for css and font
```bash
  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](http://webrafter.com/opensource/react-slick)


### Starter Kit
Checkout [yeoman generator](https://github.com/akiran/generator-react-slick) to quickly 
get started with react-slick.

### Example
```js
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     | array | Array of objects in the form of `{ breakpoint: int, settings: { ... } }` The breakpoint _int_ is the `maxWidth` so the settings will be applied when resolution is below this value. Breakpoints in the array should be ordered from smalles to greatest. Example: `[ { breakpoint: 768, settings: { slidesToShow: 3 } }, { breakpoint: 1024, settings: { slidesToShow: 5 } } ]`| Yes |
| 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) |

### Development
Want to run demos locally
```
git clone https://github.com/akiran/react-slick
npm install
npm start
open http://localhost:8000
```