Create Image Slider Using ReactJS

Introduction

In this article, we will learn how we can create an image slider using Reactjs react-slick library. Image slider, also called image carousels, is very useful for displaying multiple images to create a slide show.

Prerequisites

Knowledge of ReactJS
Visual Studio Code
Node and NPM installed

Technologies we will use to build this demo:

ReactJS
Bootstrap
HTML and CSS
react-slick library

Create a React.js Project

To create a new ReactJS project, open the command prompt and enter the following command.

npx create-react-app slickdemo

Open the newly created project in Visual Studio Code and Bootstrap in this project by using the following command.

npm install --save bootstrap

Now, open the index.js file and add Bootstrap reference.

import 'bootstrap/dist/css/bootstrap.min.css';

Now install 'react-slick' library in this project by using the following command.

npm install react-slick --save

Also need to install slick-carousel for css and font

npm install slick-carousel

Now, right-click on the public folder. Add a new folder 'assets' and add some demo images to this folder,

Now go to src folder and create a new component 'SlickDemo.js' and add the following CSS and react-slick reference,

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

Add the following code in this component:

import React, { Component } from 'react'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slickdemo.css';
export class SlickDemo extends Component {
render() {
var settings = {
dots: true,
infinite: true,
speed: 500,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div>
<div class='container' >
<div className="row title" style={{marginBottom: "20px"}} >
<div class="col-sm-12 btn btn-info">
Slick Carousel In React Application
</div>
</div>
</div>
<Slider {...settings} >
<div className="wdt">
<img className="img" src= {'assets/w5.jpeg'} className="img"/>
</div>
<div className="wdt">
<img style={{"height":"40px"}} src= {'assets/w3.jpg'} className="img"/>
</div>
<div className="wdt">
<img className="img" src= {'assets/w2.jpg'} className="img"/>
</div>
<div className="wdt">
<img className="img" src= {'assets/w2.jpg'} className="img"/>
</div >
<div className="wdt">
<img className="img" src= {'assets/w2.jpg'} className="img"/>
</div>
<div className="wdt">
<img className="img" src= {'assets/w2.jpg'} className="img"/>
</div>
</Slider>
</div>
);
}
}
export default SlickDemo

Now create a new css file and add the following css in this file.

.wdt{
width: 37% !important;
}
.img
{
height: 300px !important;
}

Now open App.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SlickDemo from './SlickDemo'
function App() {
return (
<div className="App">
<SlickDemo/>
</div>
);
}
export default App;

Now run the project by using 'npm start' and check your result:

Now create another component ,named 'SlickDemo1.js. In this component we create Multiple Items slider. Add the following code in this component:

import React, { Component } from 'react'
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slickdemo.css';
export class SlickDemo1 extends Component {
render() {
var images = [
{ img: 'assets/w5.jpeg' },
{ img: 'assets/w41.jpeg' },
{ img: 'assets/w3.jpg' },
{ img: 'assets/w4.jpeg' },
{ img: 'assets/w4.jpeg' },
{ img: 'assets/w4.jpeg' },
];
var imgSlides = () =>
images.map(num => (
<div className="imgpad">
<img className="imgdetails" src= {num.img} width="100%"/>
</div>
));
return (
<div className="App">
<div class='container-fluid'>
<div className="row title" style={{marginBottom: "20px"}} >
<div class="col-sm-12 btn btn-info">
Image Slider In React Application
</div>
</div>
</div>
<Slider
dots={true}
slidesToShow={2}
slidesToScroll={2}
autoplay={false}
arrows={true}
autoplaySpeed={3000}>{imgSlides()}</Slider>
</div>
);
}
}
export default SlickDemo1

Now create a new css file and add the following css in this file:

.wdt{
width: 90% !important;
}
.img
{
height: 300px !important;
width: 1134px;
}
.imgdetails
{
height: 280px !important;
width: 600px !important;
}
.imgpad
{
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-left: 50px !important;
padding-right: 50px !important;
}
.cls
{
padding-right: 300px !important;
background-color: blue
}

Now open App.js file and add the following code:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SlickDemo1 from './SlickDemo1'
function App() {
return (
<div className="App">
<SlickDemo1/>
</div>
);
}
export default App;

Now run the project by using 'npm start' and check your result:

Summary

In this article, we learned how we can create an image slider using ReactJS.