50
GitHub - akiran/react-slick: React carousel component
source link: https://github.com/akiran/react-slick
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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 {...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]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK