|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- ### react-slick
-
- [](#backers) [](#sponsors) [](https://gitter.im/akiran/react-slick?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
- ##### Carousel component built with React. It is a react port of [slick carousel](http://kenwheeler.github.io/slick/)
-
- ## [Documentation](http://react-slick.neostack.com)
-
- ### Installation
-
- **npm**
-
- ```bash
- npm install react-slick --save
- ```
-
- **yarn**
-
- ```bash
- yarn add react-slick
- ```
-
- ⚠️ Also install slick-carousel for css and font
-
- ```bash
- npm install slick-carousel
- @import "~slick-carousel/slick/slick.css";
- @import "~slick-carousel/slick/slick-theme.css";
- ```
-
- or add cdn link in your html
-
- ```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](https://codesandbox.io/s/ppwkk5l6xx)
-
- ### Example
-
- ```js
- 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](https://react-slick.neostack.com/docs/api/).
-
- ### Methods
-
- For all available methods, go [here](https://react-slick.neostack.com/docs/api#methods)
-
- ### Development
-
- Want to run demos locally
-
- ```bash
- git clone https://github.com/akiran/react-slick
- cd react-slick
- npm install
- npm start
- open http://localhost:8080
- ```
-
- <a href="https://opencollective.com/react-slick/donate" target="_blank">
- <img src="https://opencollective.com/react-slick/donate/button@2x.png?color=blue" width=300 />
- </a>
-
- ## Contributors
-
- This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
- <a href="https://github.com/akiran/react-slick/graphs/contributors"><img src="https://opencollective.com/react-slick/contributors.svg?width=890" /></a>
-
- ## Backers
-
- Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/react-slick#backer)]
-
- <a href="https://opencollective.com/react-slick#backers" target="_blank"><img src="https://opencollective.com/react-slick/backers.svg?width=890"></a>
-
- ## Sponsors
-
- Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/react-slick#sponsor)]
-
- <a href="https://opencollective.com/react-slick/sponsor/0/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/0/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/1/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/1/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/2/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/2/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/3/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/3/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/4/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/4/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/5/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/5/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/6/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/6/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/7/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/7/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/8/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/8/avatar.svg"></a>
- <a href="https://opencollective.com/react-slick/sponsor/9/website" target="_blank"><img src="https://opencollective.com/react-slick/sponsor/9/avatar.svg"></a>
|