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.