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:
- React App
- Knowledge about creating and managing React Components
- Tailwind CSS
- SwiperJS
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 App, Read 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 relative
and 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.