🔗Swiper_js/demos

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

<head>
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

// -- Initialize Swiper --
var swiper = new Swiper(".mySwiper", {
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",        
    },
    pagination: {
        el: ".swiper-pagination",
        // type: "progressbar",
    },
    loop: true,
    autoplay: true,

    // Slides per view
    slidesPerView: 3,
    spaceBetween: 30,
    clickable: true,

    grabCursor: true,
});

 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%;

     background-color: rgb(51, 43, 43);
 }

 .swiper-slide {
     text-align: center;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;

     background: #fff;
     background: teal;
     scale: 0.8;
 }

 .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

Swiper JS

Table of contents

🔗Swiper_js/demos