How to create Slider in ReactJS at home page

Slider/Carousel/Swiper makes a home page look good. And makes the banner more dynamic and increases the user interface more eye pleasant in a way.

In this article, we will be knowing, How to create a home page in ReactJS with Slider.

Prerequisites:

Set up the environment for the React App

  • Get the React App with preinstalled Tailwind CSS, From here. To know how to set up this file, Read this article.
  • Create Header, Footer, and Home components in the React Application.
  • Add and import Header, Footer, and Home components in App.js.
    Note:
    To know about how to add Header, Footer, and Home in React AppRead this article.
  • Create a folder named, Banner inside src/components/Home folder. And create a functional component inside the Banner folder with the same name.

// src/components/Home/Banner/Banner.js
import React from 'react';

const Banner = () => {
    return (
        <div>

        </div>
    );
};

export default Banner;
  • Create a Home component inside src/components/Home folder.

// src/components/Home/Home.js

import React from 'react';

const Home = () => {
    return (
        <div>

        </div>
    );
};

export default Home;
  • Import this Home component inside App.js
import React from "react";
// import footer
import Footer from "./components/Footer/Footer";
// import header
import Header from "./components/Header/Header";
// import Home
import Home from "./components/Home/Home";

//src/App.js import './App.css'; 
function App() {

  return (

    <div className="App">
      <Header />
      <Home />
      <Footer />
    </div>
  );

}

export default App;
  • Now import Banner.js component inside Home.js component.
// src/components/Home/Home.js

import React from 'react';
// import banner
import Banner from './Banner/Banner';

const Home = () => {
    return (
        <div>
            <Banner />
        </div>
    );
};

export default Home;

Now the environment is set. We can proceed to the next steps.

Create Slider in ReactJS

  • Open Visual Studio Code terminal and run npm i swiper to install the slider package in the React App.

  • After installing write the below codes in Banner.js and create a Banner.css file as well.

// imprt banner css to do some styling in the slider images
import './Banner.css'
// src/components/Home/Banner/Banner.js
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import './Banner.css'
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

// import required modules
import { Navigation, Pagination, Mousewheel, Keyboard } from "swiper";
const Banner = () => {
    return (
        <Swiper
            cssMode={true}
            navigation={true}
            loop={true}
            pagination={true}
            mousewheel={true}
            keyboard={true}
            rewind={true}
            modules={[Navigation, Pagination, Mousewheel, Keyboard]}
            className="mySwiper mt-12"
        >
            <SwiperSlide>
                <img className="" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80" alt="" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://images.unsplash.com/photo-1592424002053-21f369ad7fdb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" alt="" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://images.unsplash.com/photo-1607799279861-4dd421887fb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" />
            </SwiperSlide>
            <SwiperSlide>
                <img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" />
            </SwiperSlide>


        </Swiper>
    );
};

export default Banner;
/* src/components/Home/Banner/Banner.css */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Note: To add any texts or buttons inside the slider image, just set the position of that element to relativeand any kind of image can be added to the slider.

<SwiperSlide>
                <img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb- 
                 1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" />
                <h1 className="text-6xl absolute text-white">This is a text inside Slider</h1>
</SwiperSlide>

These are the steps to make a slider background that can be added as a banner or any other page inside of a website or the React Application. There are many slider packages out there. We have used, SlwiperJS.