A step-by-step guide to creating a beautiful slider with Swiper and React
Tags: react, slider, swiper
Published: 2023-02-11 13:17:23

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](https://swiperjs.com/react).


## Repository
Check out the complete source code [here](https://github.com/amiabl-programr/swiper-and-react).


## 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](https://nodejs.org/en/download/) if you don't already have them. 
Also, the code editor we will be using is [VScode](https://code.visualstudio.com/download).


## 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 ](https://code.visualstudio.com/download)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. 

![launch the development server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssgyb9f0jlfklm4f7she.png)

## 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:


```jsx
//App.jsx
import "./App.css";
function App() {
  return <div></div>;
}
export default App;
```
```css
/* App.css*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
```

In your App.jsx file, import Swiper React components
```jsx
// 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_):
```css

* {
  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.
```jsx

//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 ](https://unsplash.com/)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.

![Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mz1an053tl77jvsctwp.png)

Import the images in the App.jsx file.

![folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cqoe4is1jy76tz4sgln.png)

```jsx

// 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:
![Demo App](https://media.giphy.com/media/g3ncTmub4z0tqpi3QJ/giphy.gif)

## Conclusion

Congratulations, you have a basic slider set up already. You can visit the [documentation ](https://swiperjs.com/demos)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 ](https://swiperjs.com/react)