How to design mobile touch slider using Swiper.js Plugin ?

Last Updated : 29 Jul, 2024

In this article, we will learn how to design mobile touch sliders for mobile apps, mobile websites, or web apps using the JavaScript Swiper plugin.

Approach:

Download the required pre-compiled files from this link and save them in your working folder for the implementation of the following examples.
Keep the downloaded files "swiper.min.js" and "swiper.min.css" in the root of the working folder for the following examples to work.
Otherwise use the CDN link as given below in your following example codes.
Design the HTML document with div element with class "swiper-container" which contains div elements holding images to be used for sliding with class "swiper-slide".
Use HTML <img> src attribute for uploading images.
In the script part of the code, initialize the swiper() method using the plugin. Set the different options as per the application's need.
In the style part of the code, we have used embedded style for designing the HTML elements with the class "swiper-container" and "swiper-slide" and body element.
Refer to different CSS display properties for implementation.

CDN links:

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Example 1: The following example demonstrates a basic slider using the Swiper plugin. Other attributes of the plugin can also be set as per the need. The page is designed with HTML div elements with the plugin's classes namely "swiper-container", "swiper-wrapper", "swiper-slide", "swiper-pagination" and other classes. Use the HTML img element for inserting various images for the slider. The slider is initialized in the script part of the below code with options setting.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Implementing Swiper</title>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href=
"https://unpkg.com/swiper@7/swiper-bundle.min.css" />
    <script src=
"http://code.jquery.com/jquery-1.9.1.min.js">
    </script>
    <script src=
"https://unpkg.com/swiper@7/swiper-bundle.min.js">
    </script>

    <!-- Styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            background: #fff;
            display: -ms-flexbox;
            display: -webkit-flex;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190050/background1.jpg">
            </div>
            <div class="swiper-slide">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190136/background2.jpg">
            </div>
            <div class="swiper-slide">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190200/background3.jpg">
            </div>
            <div class="swiper-slide">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211203190222/background4.jpg">
            </div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
    </div>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {

            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            }
        });
    </script>
</body>

</html>

Output:

Example 2: In the following example, we just change or adjust the options values for the attributes in the script part of the code for the above HTML code. The developer can change or add according to the application's need. Two slides are visible at one time with a progress bar in the top and bottom of the slider.