React-Slick in React.js Web Applications

React-Slick Example Screenshot

I used to work with Bootstrap Carousel for sliders, but it has some limitations like you cannot add multiple slide on a single view, and slide one by one. Often to add multiple items in a single view I have to use bootstrap container columns and did not really fulfill the requirement.

After search through many slider online I landed on React-Slick Documentation. I looked like it fulfills all the requirements and a combo of Bootstrap Carousel with React-Slick in entire website with Tilt.js gives a website and new looks and better user experience. Let’s take a looks at react-slick.

React-Slick

React-Slick is a carousel component built with React.

How to use React-Slick?

Let’s just directly jump in and implement react-slick in our app since we have already described what React-Slick is.

Installing React-Slick

Install React-Slick is very easy. I am using NPM to install react-slick.

npm install react-slick

Once it’s installed let’s import the essentials.

I am now import React-Slick CDN for styling into our React index.html file that is situated in public folder.

<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" />

Now you index.html will look like this:

Once its the CSS is imported let’s create a folder called components in src folder.

And now create a file called ‘Slick.jsx’ in you component folder and write the basic code structure. (You can name the file whatever you want).

import React, { useState, useRef } from "react";
function Slick(){
return(
<div className="reactSlick">
</div>
);
}
export default Slick;

Next import React-Slick in the second line of Slick component.

import Slider from 'react-slick'

Creating a Slick Slider

First of all clear your App.js component and import your slick component so that you can see the changes on runtime.

Now once you import Slick component in App.js let’s add React-Slick in our Slick component.

Currently it will not work because we need to configure its settings.

Here we have added setting that we are configuring above this block of code.

Now here are a setting few values that are allowing some features to enable and disable, for example we are setting dots to true means dots will be shown below. Next we are adding break points for responsiveness. On screen larger that 1280px width there will be 2 slides in a view and user can scroll one slide on single scroll.

Now lets do some styling for better visual results.

How did get this result?

First add a folder called assets in public folder, add another folder called images and add all images in that folder (Provided below).

Now once these images are placed in images folder edit your Slick component and add some CSS to it.

Slick.jsx

import React, { useState, useRef } from "react";
import Slider from "react-slick";
function Slick(){
var workOnebackStyle = {
backgroundImage: `url("/assets/images/work1.jpg")`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}
var workOnebackStyle2 = {
backgroundImage: `url("/assets/images/work2.jpg")`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}
var workOnebackStyle3 = {
backgroundImage: `url("/assets/images/work3.jpg")`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}
var workOnebackStyle4 = {
backgroundImage: `url("/assets/images/work4.jpg")`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
initialSlide: 0,
responsive: [
{
breakpoint: 1280,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true
}
}
]
};
return(
<div className="reactSlick">
<h5 data-aos="fade-down" data-aos-delay="80" data-aos-duration="800">OUR WORK</h5>
<h1 className="sectionMainHeading" data-aos="fade-up" data-aos-delay="80" data-aos-duration="800">Just look at it!</h1>
<div className="slider">
<Slider {...settings}>
<div data-aos="flip-right" data-aos-delay="110" data-aos-duration="800">
<div className="singleWork" style={workOnebackStyle}>
<div className="no">
<div><span className="lineIn">---</span> 01</div>
</div>
<div className="credit">
<p>Shinuya, Japan</p>
<h1>Photo by Benjamin Hung</h1>
<button className="slideInUp">View in Unsplash</button>
</div>
</div>
</div>
<div data-aos="flip-right" data-aos-delay="110" data-aos-duration="800">
<div className="singleWork" style={workOnebackStyle2}>
<div className="no">
<div><span className="lineIn">---</span> 02</div>
</div>
<div className="credit">
<p>Shinuya, Japan</p>
<h1>Photo by Benjamin Hung</h1>
<button className="slideInUp">View in Unsplash</button>
</div>
</div>
</div>
<div data-aos="flip-right" data-aos-delay="110" data-aos-duration="800">
<div className="singleWork" style={workOnebackStyle3}>
<div className="no">
<div><span className="lineIn">---</span> 03</div>
</div>
<div className="credit">
<p>Shinuya, Japan</p>
<h1>Photo by Benjamin Hung</h1>
<button className="slideInUp">View in Unsplash</button>
</div>
</div>
</div>
<div data-aos="flip-right" data-aos-delay="110" data-aos-duration="800">
<div className="singleWork" style={workOnebackStyle4}>
<div className="no">
<div><span className="lineIn">---</span> 04</div>
</div>
<div className="credit">
<p>Shinuya, Japan</p>
<h1>Photo by Benjamin Hung</h1>
<button className="slideInUp">View in Unsplash</button>
</div>
</div>
</div>
<div data-aos="flip-right" data-aos-delay="110" data-aos-duration="800">
<div className="singleWork" style={workOnebackStyle}>
<div className="no">
<div><span className="lineIn">---</span> 05</div>
</div>
<div className="credit">
<p>Shinuya, Japan</p>
<h1>Photo by Benjamin Hung</h1>
<button className="slideInUp">View in Unsplash</button>
</div>
</div>
</div>
</Slider>
</div>
</div>
);
}
export default Slick;

index.css

.reactSlick {
padding: 50px 70px;
padding-left: 70px;
padding-right: 70px;
margin-top: 30px;
}
.reactSlick .slick-arrow {
display: none !important;
}
.reactSlick .sectionMainHeading {
font-size: 3.5rem;
font-weight: 800;
}
.reactSlick .slider {
margin-top: 50px;
}
.reactSlick .slider .swipe {
text-align: center;
font-size: large;
margin-top: 25px;
}
.reactSlick .slider .swipe .fa-angle-double-left {
margin-right: 10px;
-webkit-animation: move 3s infinite;
animation: move 3s infinite;
}
.reactSlick .slider .swipe .fa-angle-double-right {
margin-left: 10px;
}
.reactSlick .slider div .singleWork {
margin: 5px 5px;
padding: 30px 20px;
min-height: 550px;
position: relative;
color: white;
}
.reactSlick .slider div .singleWork .no {
font-size: x-large;
font-weight: 700;
}
.reactSlick .slider div .singleWork .credit {
position: absolute;
bottom: 10px;
}
.reactSlick .slider div .singleWork .credit button {
display: none;
background-color: #FFF;
border: 0;
padding: 5px 10px;
font-size: large;
-webkit-transition: background-color 0.5s ease-out;
transition: background-color 0.5s ease-out;
}
.reactSlick .slider div .singleWork .credit button:hover {
background-color: #00C2FF;
color: white;
}
.reactSlick .slider div .singleWork:hover {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-filter: contrast(1.2);
filter: contrast(1.2);
}
.reactSlick .slider div .singleWork:hover .credit {
-webkit-transition: .6s ease;
transition: .6s ease;
position: absolute;
bottom: 10px;
}
.reactSlick .slider div .singleWork:hover .credit button {
display: block;
}
/*# sourceMappingURL=index.css.map */

You can do more fun things to it.

Now we know how to integrate React-Slick in our React.js web app.

Optionally you can also message me if you encounter any issues.

Subscribe and follow for more articles like this.

Get an email whenever Musab Abbasi publishes. (medium.com)