Swiper Loop Slider Setup

March 18, 2025 · AI Conversations

User

Swiper loop true slider

Assistant

If you're using **Swiper.js** and want to create a slider with **loop: true**, here's how you can properly set it up:

### **Basic Swiper Loop Slider**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Loop Slider</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
    <style>
        .swiper {
            width: 80%;
            height: 300px;
        }
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <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>
        <!-- Pagination and Navigation -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            loop: true, // Enable looping
            slidesPerView: 1,
            spaceBetween: 10,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false, // Keep autoplay running after user interaction
            },
        });
    </script>

</body>
</html>

### **Key Features in This Setup**
– **`loop: true`** → Ensures that the slides loop infinitely.
– **Autoplay (`autoplay: { delay: 3000 }`)** → Slides move automatically every 3 seconds.
– **Pagination & Navigation** → Includes next/prev buttons and dots.
– **Smooth Transition** → `spaceBetween: 10` provides a small gap between slides.

Let me know if you need modifications like multi-slide views, vertical sliders, or specific customizations! 🚀

User

slide per view 3 loop true showing blank space at right side and stops looping when items finished

Assistant

If you're using **Swiper.js** with `loop: true` and `slidesPerView: 3`, and you're experiencing blank space at the right and the loop stopping when items are finished, you likely need to adjust `loopAdditionalSlides` and `centeredSlides`.

### ✅ **Fixed Swiper Loop with `slidesPerView: 3`**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper Loop Fix</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
    <style>
        .swiper {
            width: 80%;
            height: 300px;
            overflow: hidden;
        }
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: #ddd;
        }
    </style>
</head>
<body>

    <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 class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 3, 
            spaceBetween: 10,
            loop: true, 
            loopAdditionalSlides: 3, // Fix for blank space
            centeredSlides: false, // Prevent unwanted centering
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
        });
    </script>

</body>
</html>

### 🔥 **Fixes & Improvements**
1. **`loopAdditionalSlides: 3`** → Helps pre-load extra slides to avoid blank space.
2. **`centeredSlides: false`** → Ensures proper alignment without unwanted centering.
3. **Autoplay & Navigation** → Allows smooth transition and interaction.

Now your Swiper will loop **continuously** without stopping or showing blank spaces! 🚀 Let me know if you need any tweaks. 🔥

Swiper Loop Slider Setup

Leave a Comment Cancel