Create an Easy Slider for an E-commerce Dashboard With Swiper.js

Easy access to a product often leads to an increase in demand for it. In an e-commerce website, visibility means a lot. Products that are easily seen usually have higher sales rates. Several React components make it simple for goods and products to be easily seen on an e-commerce site. These components include FullPage.js, Swiper.js, ReactSwipable, and more.

In this article, we’ll learn what Swiper.js is, highlight its functionalities, and explore a potential use case in an e-commerce website. This information is important because it makes developers aware of useful tools like Swiper.js that easily implement amazing UI features.

Prerequisites:

To follow this tutorial, you’ll need the following:
• A clear understanding of frontend technologies, i.e. HTML, CSS, and JavaScript.
• Node.js installed on your computer.
• Basic knowledge of React.js.

What is Swiper.js?

The best on the market, Swiper is a cutting-edge free mobile carousel component with impressive native behavior and hardware-accelerated transitions. It’s intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper is a modern touch slider focused only on modern apps/platforms to provide the best experience, as well as simplicity. It’s available for most popular frameworks like React, Vue, Angular, and so on. In addition, Swiper is a part of Framework 7, a comprehensive framework for building iOS and Android apps, and it’s also a default slider component in the Ionic Framework. To use Swiper.js, you must install it with its npm package:

npm I swiper

Use Cases for Swiper.js

Swiper.js is mostly used for sliders or carousels. The following are some of the use cases of Swiper.js:

• Image gallery organization: With Swiper.js, images and contents are easily managed. Developers only need to install Swiper.js to use any of its properties.

• Multiple-display navigation: Swiper.js' exceptional multiple-display navigation implementation allows users to view more content without clicking or scrolling.

• Dashboard animation: A dashboard should be interactive and have a good display. With Swiper.js, dashboard animation is very easy, from display to interaction.

Styling the Dashboard

By default, Swiper React uses the core version of Swiper without any additional modules. Therefore, to use any other Swiper.js modules, they need to be installed.
Swiper.js must be installed in the application before we start working on the dashboard UI. To do this, let’s run the accompanying command in the working directory of the application:

npm install swiper

Save this code

After Swiper.js has been successfully installed in the application environment, we need to import the required methods and files into the "App.js" component. In this instance, we’re importing the following:

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

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

// Import required modules
import { Pagination } from "swiper";

Save this code

In the above code snippet, we imported React, Swiper, and SwiperSlide from swiper/react, Navigation and Autoplay from “Swiper,” swiper/css, swiper/css/pagination, styles.css (our custom CSS stylesheet), and Pagination from swiper.
Our stylesheet is located in the 'styles.css' file that we imported. The styles in this article are contained in the stylesheet. (Gist)

Now, we’ll create a new variable called pagination inside the App.js component, which will be used as the Swiper component's pagination option.
The pagination component shows an active slide and a button that can be clicked to move between slides. The pagination is made using the following code:

const pagination = {
  clickable: true,
  renderBullet: function (index: number, className: string) {
    return '<span class="' + className + '">' + (index + 1) + "</span>";
  },
};

Save this code

Next, we need to create the returned content of the App.js component. A hero section with a full-width slider, a 3-column grid slider, and a 3-column grid product gallery make up this content.
The complete code is available here: Gist.
In the gist, you can see that the Swiper component was used various times, as shown in this example:

<Swiper
  pagination={pagination}
  autoplay={{
    delay: 4000,
    disableOnInteraction: true,
  }}
  modules={[Navigation, Autoplay, Pagination]}
>
  <SwiperSlide>
    <img src={img1} loading="lazy" alt="Slide 1" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img2} loading="lazy" alt="Slide 2" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img3} loading="lazy" alt="Slide 3" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img4} loading="lazy" alt="Slide 4" />
  </SwiperSlide>
</Swiper>

Save this code

The code snippet above shows the component for the hero section full-width slider. The Swiper component wraps a group of SwiperSlide components and accepts options, including the following:

• Pagination: an object that returns a component for pagination.

• Autoplay: an object used to set the amount of time it takes for the slide to change to the next slide automatically. We can also set the slide to stop changing if a user interacts with it.

• Modules: an array of methods used in a particular Swiper slide.

The SwiperSlide components then wrap the main content that each slide show displays. In this case, we only wanted to display images, so we passed the img tag as a child to this component. This can be seen in the image below:

Another example is the effect-card slider. This slider arranges the SwiperSlider as a stack of cards, and users can use the mouse to shuffle between the stack. We can implement the effect-card slider with this format:

<Swiper
  effect={"cards"}
  grabCursor={true}
  modules={[EffectCards]}
  className="mySwiper center-main"
>
  <SwiperSlide>
    <img src={img5} loading="lazy" alt="Product 1" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img6} loading="lazy" alt="Product 2" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img7} loading="lazy" alt="Product 3" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img8} loading="lazy" alt="Product 4" />
  </SwiperSlide>
</Swiper>

Save this code
In the code snippet above, we used the cards options for the effect props, and we also set the grabCursor props to true, which enables users to drag each slide into view. We must also set the modules props to EffectCards.
The image below illustrates the outcome:

Another example is the 3-column slider. We have a div containing 3 similar sliders with this format:

<Swiper
  navigation={true}
  autoplay={{ delay: 2500, disableOnInteraction: false }}
  modules={[Navigation, Autoplay]}
  className="mySwiper"
>
  <SwiperSlide>
    <img src={img9} loading="lazy" alt="Product 1" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img5} loading="lazy" alt="Product 2" />
  </SwiperSlide>
  <SwiperSlide>
    <img src={img6} loading="lazy" alt="Product 3" />
  </SwiperSlide>
</Swiper>

Save this code

In this case, we are passing more content than just images into the SwiperSlide component. Here is what the result looks like:

Conclusion

In this article, we learned about Swiper.js and discussed different use cases for Swiper.js.
We also demonstrated how to use Swiper.js to create an e-commerce React application. Are you interested in using Swiper.js to build your application, make improvements, or look over the sample code? Check out the Repo. You can access the app here. Happy coding!