Swiper Autoplay Loop Fix

swiperEl.addEventListener('mouseenter', function () {
swiper.autoplay.stop();
setTimeout(() => { // Use a very short timeout (e.g., 10ms)
swiper.wrapperEl.style.transitionDuration = '0ms';
swiper.wrapperEl.style.transform = swiper.wrapperEl.style.transform;
}, 10); // Adjust timeout if needed
}, false);

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

swiper.autoplay.start();
}
sl autoplay looping not working ,its create gap from right side

### **Possible Fixes:**

#### **1. Adjust `loopAdditionalSlides`**
Swiper might need additional duplicate slides for a smooth infinite loop. Try adding:

loopAdditionalSlides: 3, // Adjust based on the number of slides

#### **2. Modify `speed` to a Lower Value**
`speed: 6000` is quite high. Try reducing it to around `3000` or `2000` to see if it helps:

speed: 2000,

#### **3. Change `slidesPerView` for Loop Compatibility**
If you're using `loop: true`, try making `slidesPerView` an even number that aligns well with the total slides count:

slidesPerView: "auto",
centeredSlides: true, // This helps prevent gaps

#### **4. Ensure `loopFillGroupWithBlank` is False**
Setting `loopFillGroupWithBlank: true` can sometimes create unexpected gaps. Try setting it to `false`:

loopFillGroupWithBlank: false,

#### **5. Adjust `autoplay` Settings**
Currently, you have:

autoplay: {
  delay: 0,
  disableOnInteraction: true,
  reverseDirection: false,
  pauseOnMouseEnter: true,
  stopOnLastSlide: false
}

Change `disableOnInteraction` to `false`:

autoplay: {
  delay: 1, // Keeps it moving at a constant speed
  disableOnInteraction: false,
  pauseOnMouseEnter: true,
},

Also, ensure `reverseDirection: false` unless you want it to move in reverse.

### **Final Updated Code**
Try this optimized version:

if (jQuery('.swiperslides').length) {
    var swiper = new Swiper(".swiperslides", {
      slidesPerView: "auto",
      centeredSlides: true,
      spaceBetween: 30,
      loop: true,
      speed: 2000, // Lowered for better looping
      loopAdditionalSlides: 3, // Add duplicate slides for seamless looping
      allowTouchMove: false,
      loopFillGroupWithBlank: false,
      autoplay: {
        delay: 1, // Smooth, continuous autoplay
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      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();
          });

          swiperEl.addEventListener('mouseleave', function () {
            swiper.autoplay.start();
          });
        }
      },
      breakpoints: {
        0: {
          slidesPerView: 1.2,
          spaceBetween: 10,
        },
        1024: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
      },
    });

    swiper.autoplay.start();
}

### **Summary of Fixes:**
✅ Added `loopAdditionalSlides: 3` to fix the gap issue
✅ Lowered `speed` to `2000` for smoother animation
✅ Set `loopFillGroupWithBlank: false` to avoid unnecessary blank slides
✅ Adjusted `autoplay` settings for better pause/play behavior
✅ Used `"auto"` for `slidesPerView` with `centeredSlides: true` for seamless looping

Try this and let me know if you're still seeing gaps! 🚀