React Slick third party package

 

1. Third-Party Package - 

react-slick

NPM contains a react-slick, a third-party package that provides a React component Slider to add a carousel to your application.

Installation Command:

1

npm install react-slick

Also, install slick-carousel for CSS and font

1

npm install slick-carousel

1.1 Advantages

• Easy to use
• Highly customizable
• More performant

2. Slider Props

We can provide different props to the Slider component. Below are the most commonly used props.

Prop	Description	Default Value
slidesToShow	Specifies the number of slides to show in one frame	1
dots	If set to false, no dots will display under the carousel	true
slidesToScroll	Specifies the number of slides to scroll at once	1
dotsClass	CSS class for styling dots	"slick-dots"

Example:

File: src/components/ReactSlick/index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

import Slider from 'react-slick'

import 'slick-carousel/slick/slick.css'

import 'slick-carousel/slick/slick-theme.css'

import './index.css'

const ReactSlick = () => {

const settings = {

dots: true,

slidesToShow: 1,

slidesToScroll: 1,

}

return (

<div className="slider-container">

<Slider {...settings}>

<div>

<h3>1</h3>

</div>

<div>

<h3>2</h3>

</div>

<div>

<h3>3</h3>

</div>

<div>

<h3>4</h3>

</div>

</Slider>

</div>

)

}

export default ReactSlick

JSX

Collapse

File: src/components/ReactSlick/index.css

1

2

3

4

.slider-container {

background-color: #419be0;

padding: 40px;

}

CSS

File: src/App.js

1

2

3

4

5

6

import ReactSlick from './components/ReactSlick'

const App = () => {

return <ReactSlick />

}

export default App

JSX

Reference

To know more about the

react-slick

, you can refer to this.