A step-by-step guide to creating a beautiful slider with Swiper and React

#react #slider #swiper

When a visitor first arrives at your website, sliders are a fantastic way to showcase your greatest work, especially if photography, fashion, or nature are your main features.
Building a beautiful slider from scratch with javascript can be lengthy and time-consuming, but instead of creating a slider(or carousel) from scratch, we can leverage Swiper to bootstrap the process for us. In this article, we will discuss how we can easily set up a basic slider with Swiper.

Repository

Check out the complete source code here.

Prerequisites

Node.js must be installed on your machine before you can begin. You may download and install these tools from the Node.js website if you don't already have them.
Also, the code editor we will be using is VScode.

What is Swiper?

Swiper is the most cutting-edge free mobile touch slider with incredible native behavior and hardware-accelerated transitions. Mobile web applications, native mobile apps, and web pages can use Swiper. Swiper employs the cutting-edge flexbox style for slide layout, eliminating many issues and saving a lot of time with size calculations. Such a layout also enables the Slides grid's pure CSS configuration. A fairly robust API is included with Swiper. It allows you to make your own navigation buttons, parallax effects, and pagination, among many other things.

Swiper with React.js

Open your preferred code editor, we'll be using VScode in this tutorial. Open your terminal and enter this command to spin up a react project.

npx create-react-app swiper-and-react

Navigate to the new directory now, then launch the development server as follows:



cd swiper-and-react
npm run start

By doing so, you'll launch the development server. Check your terminal for the port your project is assigned to, then open it in your web browser.

Install Swiper with npm

Next, install Swiper by running the command below:

npm i swiper

Clean up your React project, and ensure your directory resembles this:



//App.jsx
import "./App.css";
function App() {
  return <div></div>;
}
export default App;



/* App.css*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

In your App.jsx file, import Swiper React components



// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";

Update your CSS file with the default Swiper styling using the code below(this code is optional):




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.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;
}

Building the Slider

Add the Swiper component.




//App.jsx
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "./App.css";

function App() {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
}

export default App;

Go to Unsplash to get some beautiful images for your slider and add them to your React project. In the src folder, create an image folder and put all the photos there.

Import the images in the App.jsx file.




// Import Swiper React components
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import leaf from "../src/images/leaf.jpg";
import clouds from "../src/images/clouds.jpg";
import mountains from "../src/images/mountains.jpg";
import sunset from "../src/images/sunset.jpg";

// Import Swiper styles
import "swiper/css";
import "./App.css";

function App() {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>
        <img src={leaf} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={sunset} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={mountains} alt="" />
      </SwiperSlide>
      <SwiperSlide>
        <img src={clouds} alt="" />
      </SwiperSlide>
    </Swiper>
  );
}

export default App;

Your demo application will look like this when you complete it:

Conclusion

Congratulations, you have a basic slider set up already. You can visit the documentation where you can find more examples of how you can add more features to the slider.

Resources

In this post, I covered the basic aspects of the Swiper library. You may use this resource to learn how to add extra features to your slider, such as navigation and pagination.
Swiper React Documentation