Hey there, let’s get this Swiper carousel issue sorted out! The weird disappearing and catching behavior you’re seeing when swiping is almost certainly tied to how you’ve configured slide widths alongside the loop feature in Swiper 4.x. Here’s what’s going wrong and how to fix it:

What’s Causing the Glitch? #

Swiper’s loop functionality works by creating duplicate copies of your slides behind the scenes to create that seamless infinite scroll effect. But when you set .swiper-slide { width: auto!important; } and use margin for spacing, Swiper can’t accurately calculate the exact width of each slide. This throws off the positioning of those duplicate slides, leading to the janky disappearance and random recovery you’re experiencing.

Step-by-Step Fix #

Let’s adjust your configuration to play nice with Swiper’s loop system while keeping your desired "auto-width slides with spacing" behavior:

1. Update the Swiper Initialization Code #

Replace your current JS with this adjusted version:

jQuery(document).ready(function($) { 
  // SWIPER FOR CAROUSEL 
  var mySwiper2 = new Swiper ('.swiper-container-2', { 
    init: true, 
    direction: 'horizontal', 
    loop: true, 
    preloadImages: true,
    slidesPerView: 'auto', // Let Swiper calculate slide widths automatically
    spaceBetween: 30, // Replace margin with built-in spacing (15px on each side)
    centeredSlides: true, // Optional: Keeps active slide centered (remove if you don't need it)
    grabCursor: true // Optional: Improves swipe feel, or keep your custom cursor below
  }) 
});

2. Adjust Your CSS #

Tweak your styles to remove conflicting rules and let Swiper handle spacing:

.swiper-container-2 { 
  width: 100%; 
} 
.swiper-slide { 
  /* Remove width: auto!important; and margin — Swiper handles this now */
  width: auto; /* Keep this if you want slides to fit their content */
} 
.swiper-slide img { 
  max-height: 600px; 
  width: 100%; /* Ensure images fit their slide container */
  object-fit: contain; /* Optional: Preserve image aspect ratio */
} 
.swiper-container-2:hover { 
  cursor: url(/wp-content/uploads/curse-custom-v2.png), auto; 
} 
.swiper-slide div { 
  text-align: center; 
  font-family: 'gt_sectra_fineregular_italic'; 
  display: block; 
}

3. Keep Your HTML Structure (It’s Fine!) #

Your existing HTML markup for the swiper container, wrapper, and slides is correct — no changes needed there.

Why This Works #

• slidesPerView: 'auto' tells Swiper to respect each slide’s natural content width, which gives you the same effect as width: auto but lets Swiper properly calculate dimensions for loop duplicates.
• spaceBetween replaces manual margins with Swiper’s built-in spacing system, which avoids layout conflicts that break the loop functionality.
• Adding width: 100% to your slide images ensures they scale correctly within their auto-width containers, preventing unexpected layout shifts.

Give these changes a test — your carousel should now swipe smoothly in an infinite loop without disappearing or catching!

内容的提问来源于stack exchange，提问作者Birdie Golden