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.
  1. npx create-react-app slickdemo
Open the newly created project in Visual Studio Code and Bootstrap in this project by using the following command.
  1. npm install --save bootstrap
Now, open the index.js file and add Bootstrap reference.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
Now install 'react-slick' library in this project by using the following command.
  1. npm install react-slick --save
Also need to install slick-carousel for css and font
  1. npm install slick-carousel
Now, right-click on the public folder. Add a new folder 'assets' and add some demo images to this folder,
Image Slider Using ReactJS
Now go to src folder and create a new component 'SlickDemo.js' and add the following CSS and react-slick reference,
  1. import "slick-carousel/slick/slick.css";
  2. import "slick-carousel/slick/slick-theme.css";
  3. import Slider from "react-slick";
Add the following code in this component:
  1. import React, { Component } from 'react'
  2. import "slick-carousel/slick/slick.css";
  3. import "slick-carousel/slick/slick-theme.css";
  4. import Slider from "react-slick";
  5. import './slickdemo.css';
  6. export class SlickDemo extends Component {
  7. render() {
  8. var settings = {
  9. dots: true,
  10. infinite: true,
  11. speed: 500,
  12. centerMode: true,
  13. slidesToShow: 1,
  14. slidesToScroll: 1
  15. };
  16. return (
  17. <div>
  18. <div class='container' >
  19. <div className="row title" style={{marginBottom: "20px"}} >
  20. <div class="col-sm-12 btn btn-info">
  21. Slick Carousel In React Application
  22. </div>
  23. </div>
  24. </div>
  25. <Slider {...settings} >
  26. <div className="wdt">
  27. <img className="img" src= {'assets/w5.jpeg'} className="img"/>
  28. </div>
  29. <div className="wdt">
  30. <img style={{"height":"40px"}} src= {'assets/w3.jpg'} className="img"/>
  31. </div>
  32. <div className="wdt">
  33. <img className="img" src= {'assets/w2.jpg'} className="img"/>
  34. </div>
  35. <div className="wdt">
  36. <img className="img" src= {'assets/w2.jpg'} className="img"/>
  37. </div >
  38. <div className="wdt">
  39. <img className="img" src= {'assets/w2.jpg'} className="img"/>
  40. </div>
  41. <div className="wdt">
  42. <img className="img" src= {'assets/w2.jpg'} className="img"/>
  43. </div>
  44. </Slider>
  45. </div>
  46. );
  47. }
  48. }
  50. export default SlickDemo
Now create a new css file and add the following css in this file.
  1. .wdt{
  2. width: 37% !important;
  3. }
  4. .img
  5. {
  6. height: 300px !important;
  7. }
Now open App.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import SlickDemo from './SlickDemo'
  5. function App() {
  6. return (
  7. <div className="App">
  8. <SlickDemo/>
  9. </div>
  10. );
  11. }
  13. export default App;
Now run the project by using 'npm start' and check your result:
Image Slider Using ReactJS
Now create another component ,named 'SlickDemo1.js. In this component we create Multiple Items slider. Add the following code in this component:
  1. import React, { Component } from 'react'
  2. import "slick-carousel/slick/slick.css";
  3. import "slick-carousel/slick/slick-theme.css";
  4. import Slider from "react-slick";
  5. import './slickdemo.css';
  6. export class SlickDemo1 extends Component {
  7. render() {
  8. var images = [
  9. { img: 'assets/w5.jpeg' },
  10. { img: 'assets/w41.jpeg' },
  11. { img: 'assets/w3.jpg' },
  12. { img: 'assets/w4.jpeg' },
  13. { img: 'assets/w4.jpeg' },
  14. { img: 'assets/w4.jpeg' },
  15. ];
  16. var imgSlides = () =>
  17. images.map(num => (
  18. <div className="imgpad">
  19. <img className="imgdetails" src= {num.img} width="100%"/>
  20. </div>
  21. ));
  22. return (
  23. <div className="App">
  24. <div class='container-fluid'>
  25. <div className="row title" style={{marginBottom: "20px"}} >
  26. <div class="col-sm-12 btn btn-info">
  27. Image Slider In React Application
  28. </div>
  29. </div>
  30. </div>
  31. <Slider
  32. dots={true}
  33. slidesToShow={2}
  34. slidesToScroll={2}
  35. autoplay={false}
  36. arrows={true}
  37. autoplaySpeed={3000}>{imgSlides()}</Slider>
  38. </div>
  39. );
  40. }
  41. }
  42. export default SlickDemo1
Now create a new css file and add the following css in this file:
  1. .wdt{
  2. width: 90% !important;
  3. }
  4. .img
  5. {
  6. height: 300px !important;
  7. width: 1134px;
  8. }
  10. .imgdetails
  11. {
  12. height: 280px !important;
  13. width: 600px !important;
  15. }
  17. .imgpad
  18. {
  19. padding-bottom: 0px !important;
  20. padding-top: 0px !important;
  21. padding-left: 50px !important;
  22. padding-right: 50px !important;
  24. }
  25. .cls
  26. {
  27. padding-right: 300px !important;
  28. background-color: blue
  29. }
Now open App.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import SlickDemo1 from './SlickDemo1'
  5. function App() {
  6. return (
  7. <div className="App">
  8. <SlickDemo1/>
  9. </div>
  10. );
  11. }
  13. export default App;
Now run the project by using 'npm start' and check your result:
Image Slider Using ReactJS

Summary

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