• Stars
    star
    11,292
  • Rank 2,932 (Top 0.06 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React carousel component

react-slick

Backers on Open Collective Sponsors on Open Collective

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

Installation

npm

npm install react-slick --save

yarn

yarn add react-slick

Also install slick-carousel for css and font

npm install slick-carousel

// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

or add cdn link in your html

<link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
/>
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
/>

Example

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  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>
  );
}

Props

For all available props, go here.

Methods

For all available methods, go here

Development

Want to run demos locally

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

Community

Join our discord channel to discuss react-slick bugs and ask for help

Contributing

Please see the contributing guidelines

More Repositories

1

react-highlight

React component for syntax highlighting
JavaScript
751
star
2

react-foundation-apps

Foundation Apps components built with React
JavaScript
292
star
3

json2mq

Generate media query string from JSON or javascript object
JavaScript
167
star
4

react-responsive-mixin

Mixin to develop responsive react components
JavaScript
95
star
5

awesome-mobx

Awesome list mobx resources
57
star
6

generator-react-foundation-apps

Start a project with react foundation apps quickly
CSS
37
star
7

can-use-dom

Test if you can use dom in the environment
JavaScript
20
star
8

timetracker

Timetracker application built with react-native
JavaScript
17
star
9

nextjs-demo

Next.js demos
JavaScript
11
star
10

react-isomorphic-example

JavaScript
10
star
11

foundation-material

Foundation for Apps and material design
CSS
9
star
12

string-convert

Set of string conversion functions
JavaScript
7
star
13

generator-react-slick

Starter kit for react-slick
CSS
7
star
14

graphql-asia-2019-workshop

JavaScript
6
star
15

reactfoo-delhi-react-workshop

JavaScript
5
star
16

react-native-layout-examples

JavaScript
4
star
17

rescript-react-workshop

CSS
4
star
18

react-test-examples

Basic examples for testing react components
JavaScript
4
star
19

react-layer-mixin

React mixin for building Layered components
JavaScript
4
star
20

react-todomvc

JavaScript
3
star
21

graphql-apollo-chat

JavaScript
3
star
22

react-ripple

Ripple effect of material design with react
JavaScript
3
star
23

react-india-2019-graphql-workshop

JavaScript
3
star
24

react-autosize

JavaScript
2
star
25

react-hook-examples

JavaScript
2
star
26

react-ssr

React server side rendering with express and webpack
JavaScript
2
star
27

react-native-analog-clock

Simple analog clock create with react-native
JavaScript
2
star
28

react-native-navigation-demos

JavaScript
2
star
29

apollo-link-cache

JavaScript
2
star
30

graphql-asia-2020-workshop

JavaScript
2
star
31

gulp-jsxformat

prettify jsx with gulp
JavaScript
2
star
32

rescript-binding-examples

1
star
33

reason-react-swapi

Reason
1
star
34

relay-todo

JavaScript
1
star
35

dataviz-workshop-demos

JavaScript
1
star
36

graphql-relay-todo

JavaScript
1
star
37

reddit-clone

JavaScript
1
star
38

react-materialize

react port of materialize
1
star
39

react-form-examples

Example forms built with react
JavaScript
1
star
40

webpack-demo

JavaScript
1
star
41

react-beginners-workshop

JavaScript
1
star
42

apollo-mutation-issue

JavaScript
1
star
43

devday-offline-demo

JavaScript
1
star
44

react-animation-demos

JavaScript
1
star
45

gulp-sassbeautify

Beautify sass and scss with gulp
JavaScript
1
star
46

reason-react-todomvc

Reason
1
star
47

graphql-apollo-todo

Simple todo app built with GraphQL, Apollo, React
JavaScript
1
star
48

apollo-todo

JavaScript
1
star
49

todo-app

Simple todo app written in react
CSS
1
star
50

hasura-relay-todo

JavaScript
1
star
51

reactfoo-mumbai-graphql-workshop

JavaScript
1
star
52

graphql-urql-chat

JavaScript
1
star
53

ReactNativeCalculator

Simple Calculator built with react native
JavaScript
1
star
54

mq2json

Parse media query string to json
JavaScript
1
star
55

jan2017-training

JavaScript
1
star