50

GitHub - akiran/react-slick: React carousel component

 4 years ago
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

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 {...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
68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f646f6e6174652f627574746f6e4032782e706e673f636f6c6f723d626c7565

Contributors

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

Backers

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

68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f6261636b6572732e7376673f77696474683d383930

Sponsors

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

68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f302f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f312f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f322f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f332f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f342f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f352f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f362f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f372f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f382f6176617461722e737667 68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f72656163742d736c69636b2f73706f6e736f722f392f6176617461722e737667


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK