What is Swiperjs? Creating Dynamic Sliders with Swiper.js in React

Introduction

SwiperJS is a popular open-source JavaScript library that allows developers to create responsive and touch-enabled sliders and carousels for their web and mobile applications. It is designed to be lightweight, customizable, and easy to use, making it a popular choice for web developers who want to add interactive and engaging content to their websites.

With SwiperJS, you can create a wide variety of sliders and carousels, including image sliders, video sliders, text sliders, and more. It provides a rich set of features and options for customization, including autoplay, pagination, navigation, loop mode, and more. SwiperJS also supports a wide range of touch gestures, such as swiping and dragging, making it a great choice for mobile applications.

SwiperJS is compatible with a wide range of web technologies, including React, Vue, Angular, and plain JavaScript. It is also actively maintained and regularly updated, ensuring that it remains a reliable and up-to-date choice for web developers. Whether you are building a simple website or a complex web application, SwiperJS is a powerful tool that can help you create stunning and interactive sliders and carousels with ease.

Do Follow : https://swiperjs.com/ for more information.

Installation and simple guide

To install SwiperJS for React, you can use npm or yarn to add the necessary packages to your project. Here are the steps:

• Open your terminal and navigate to the root folder of your React project.
• Install the swiper package and its React bindings by running one of the following commands:

# Using npm
npm install swiper swiper/react

# Using yarn
yarn add swiper swiper/react

• Once the installation is complete, import the necessary components in your React component:

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';

• Finally, you can use the Swiper and SwiperSlide components in your React component to create a slider:

const MySwiper = () => {
  return (
    <Swiper
      spaceBetween={30}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>
  );
};

In this example, we’ve created a simple slider with 5 slides, and added navigation, pagination, and scrollbar components using the props provided by Swiperjs.

Also Read : “Mastering Navigation in React: A Guide to React Router”

After installing swiperjs along with the necessary components and CSS in the React component, now create a state variable to hold testimonial data.

Following this step, we render the Swiper component with the SwiperSlide components inside, mapping over the testimonial data in the state:

{testimonials.map((test) => {
              return (
                <div
                  key={test.id}
                  className="bg-white  overflow-hidden shadow rounded-full divide-y "
                >
                  <SwiperSlide key={test.id}>
                    <div className=" max-w-xl mx-auto flex flex-row items-center">
                      <div className="flex flex-row rounded-lg shadow-lg overflow-hidden w-full mb-12 md:h-64 lg:h-56">
                        <div className="flex-shrink-0 mt-10 p-3">
                          <img
                            className=" w-20 h-20 rounded-full"
                            src={test.image}
                            alt={test.name}
                          />
                          <p className="mt-3 text-sm leading-6">
                            - {test.name}, <br /> {test.jobTitle}
                          </p>
                        </div>
                        <div className="flex-1 bg-white p-6 flex flex-row justify-between">
                          <div className="grid items-center">
                            <h3 className=" text-center  text-base leading-5 font-semibold">
                              {test.quote}
                            </h3>
                          </div>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                </div>
              );
            })}

Output:

The above code generates testimonial of students as above where it automatically changes every 2s or we can change it manually from pagination.