Github url

react-slick

by akiran

akiran /react-slick

React carousel component

8.5K Stars 1.8K Forks Last release: about 2 months ago (0.26.1) MIT License 1.1K Commits 26 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-slick

Backers on Open Collective Sponsors on Open Collective Join the chat at https://gitter.im/akiran/react-slick

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

Documentation

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.6.0/slick.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">

PlayGround

Example

import React from "react"; import Slider from "react-slick"; class SimpleSlider extends React.Component { render() { var settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <slider>
        <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

Contributing

Please see the contributing guidelines

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.