Swiper Gap Issue Solution

swiperEl.addEventListener('mouseenter', function() {
swiper.autoplay.stop();
swiper.detachEvents();
swiper.setTransition(0);
swiper.el.style.transitionDuration = '0ms';
swiper.wrapperEl.style.transitionDuration = '0ms';
swiper.wrapperEl.style.transform = swiper.wrapperEl.style.transform;
}, false);

swiperEl.addEventListener('mouseleave', function() {
swiper.attachEvents();
swiper.setTransition(swiper.params.speed);
swiper.el.style.transitionDuration = swiper.params.speed + 'ms';
swiper.wrapperEl.style.transitionDuration = swiper.params.speed + 'ms';
swiper.autoplay.start();
}, false);
}
},
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});

// Start autoplay initially
swiper.autoplay.start();

}
if(jQuery('.swiperslidesOverview').length)
{
var swiperover = new Swiper(".swiperslidesOverview", {
slidesPerView:3,
spaceBetween: 30,
pagination: false,
breakpoints: {
0: {
slidesPerView: 1.2,
spaceBetween: 10,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
}

});
loopp:true working but it creases gap from wright side when slides are finihed

### Solution
Try adjusting the following settings:

#### **1. Use `centeredSlides: true`**
This ensures that slides are always centered and reduces gaps at the edges.

loop: true,
centeredSlides: true,

#### **2. Ensure `slidesPerView: 'auto'` (Optional)**
This makes Swiper dynamically calculate the number of slides per view based on their width, reducing potential gaps.

slidesPerView: "auto",

#### **3. Adjust `loopFillGroupWithBlank: true`**
If you are using groups, this option fills any empty space in the last group of slides to prevent gaps.

loopFillGroupWithBlank: true,

### Updated Swiper Configuration:

var swiper = new Swiper(".swiperslides", {
    slidesPerView: 3,
    spaceBetween: 30,
    loop: true,
    centeredSlides: true,
    speed: 6000,
    allowTouchMove: false,
    loopFillGroupWithBlank: true,
    autoplay: {
        delay: 0,
        disableOnInteraction: true,
        reverseDirection: false,
        pauseOnMouseEnter: true,
        stopOnLastSlide: false
    },
    on: {
        beforeInit: function (swiper) {
            swiper.wrapperEl.style.transitionTimingFunction = "linear";
        },
        init: function () {
            console.log("Swiper initialized");
            const swiperEl = document.querySelector('.swiperslides');

            swiperEl.addEventListener('mouseenter', function () {
                swiper.autoplay.stop();
                swiper.detachEvents();
                swiper.setTransition(0);
                swiper.el.style.transitionDuration = '0ms';
                swiper.wrapperEl.style.transitionDuration = '0ms';
                swiper.wrapperEl.style.transform = swiper.wrapperEl.style.transform;
            }, false);

            swiperEl.addEventListener('mouseleave', function () {
                swiper.attachEvents();
                swiper.setTransition(swiper.params.speed);
                swiper.el.style.transitionDuration = swiper.params.speed + 'ms';
                swiper.wrapperEl.style.transitionDuration = swiper.params.speed + 'ms';
                swiper.autoplay.start();
            }, false);
        }
    },
    breakpoints: {
        0: {
            slidesPerView: 1.2,
            spaceBetween: 10,
        },
        1024: {
            slidesPerView: 3,
            spaceBetween: 30,
        },
    },
});

// Start autoplay initially
swiper.autoplay.start();

### **Summary of Fixes:**
1. `centeredSlides: true` – Centers slides to remove gaps.
2. `loopFillGroupWithBlank: true` – Fills extra space at the end of the loop.
3. Optional: `slidesPerView: "auto"` – Helps with responsiveness.

Try this and let me know if you need more adjustments! 🚀