1npm install slick-carousel
2
3// Import css files
4import "slick-carousel/slick/slick.css";
5import "slick-carousel/slick/slick-theme.css";
1import React, { Component } from "react";
2import Slider from "react-slick";
3
4export default class SimpleSlider extends Component {
5 render() {
6 const settings = {
7 dots: true,
8 infinite: true,
9 speed: 500,
10 slidesToShow: 5,
11 slidesToScroll: 1
12 };
13 return (
14 <div>
15 <h2> Single Item</h2>
16 <Slider {...settings}>
17 <div>
18 <h3>1</h3>
19 </div>
20 <div>
21 <h3>2</h3>
22 </div>
23 <div>
24 <h3>3</h3>
25 </div>
26 <div>
27 <h3>4</h3>
28 </div>
29 <div>
30 <h3>5</h3>
31 </div>
32 <div>
33 <h3>6</h3>
34 </div>
35 </Slider>
36 </div>
37 );
38 }
39}
40
1import React, { Component } from "react";
2import Slider from "react-slick";
3
4export default class SimpleSlider extends Component {
5 render() {
6 const settings = {
7 dots: true,
8 infinite: true,
9 speed: 500,
10 slidesToShow: 2,
11 slidesToScroll: 1
12 };
13 return (
14 <div>
15 <h2> Single Item</h2>
16 <Slider {...settings}>
17 <div>
18 <h3>1</h3>
19 </div>
20 <div>
21 <h3>2</h3>
22 </div>
23 <div>
24 <h3>3</h3>
25 </div>
26 <div>
27 <h3>4</h3>
28 </div>
29 <div>
30 <h3>5</h3>
31 </div>
32 <div>
33 <h3>6</h3>
34 </div>
35 </Slider>
36 </div>
37 );
38 }
39}
40
1import React, { Component } from "react";
2import Slider from "react-slick";
3
4export default class SimpleSlider extends Component {
5 render() {
6 const settings = {
7 dots: true,
8 infinite: true,
9 speed: 500,
10 slidesToShow: 3,
11 slidesToScroll: 1
12 };
13 return (
14 <div>
15 <h2> Single Item</h2>
16 <Slider {...settings}>
17 <div>
18 <h3>1</h3>
19 </div>
20 <div>
21 <h3>2</h3>
22 </div>
23 <div>
24 <h3>3</h3>
25 </div>
26 <div>
27 <h3>4</h3>
28 </div>
29 <div>
30 <h3>5</h3>
31 </div>
32 <div>
33 <h3>6</h3>
34 </div>
35 </Slider>
36 </div>
37 );
38 }
39}
40