About this fork
This is a fork of the original port that you can find HERE
Due to the lack of maintenance, we needed to have our own fork where we merge interesting PRs and fix bugs we encounter.
Feel free to use or fork.
Carousel component built with React. It is a react port of slick carousel
npm
npm install @onrewind/react-slick --save
yarn
yarn add @onrewind/react-slick
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" />
import React from "react";
import Slider from "@onrewind/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>
);
}
}
For all available props, go here.
For all available methods, go here
Want to run demos locally
git clone https://github.com/onrewind/react-slick
cd react-slick
npm install
npm start
open http://localhost:8080