React Carousel Component – react-slick

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 "~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 {...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

Contributors

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

Backers

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