Swiper JS 技术问题：显示下一张幻灯片部分内容及滚动对齐异常

I've dug into your Swiper setup issue—here's a straightforward fix that keeps the partial next-slide visibility you want while ensuring slides align perfectly with the container start after scrolling:

The Core Problem #

Your hardcoded width: Xvw !important rules on slides are overriding Swiper's automatic layout calculations. When using fractional slidesPerView values, Swiper relies on its own dimension logic to handle alignment, and forced widths break this system entirely. The vertical breakpoint settings also weren't optimized for partial slide visibility without misalignment.

Step-by-Step Solutions #

1. Clean Up Conflicting CSS

First, remove the forced slide width/height rules that are messing with Swiper's layout:

/* Delete these lines entirely */
.swiper-slide:nth-child(even) { height: 75%; width: 45vw !important; }
.swiper-slide:nth-child(odd) { height: 100%; width: 55vw !important; }
@media screen and (max-width: 1079px) { 
  .swiper-slide:nth-child(even) { height: 100%!important; width: 100% !important; } 
}
@media screen and (max-width: 1079px) { 
  .swiper-slide:nth-child(odd) { height: 100%!important; width: 100% !important; } 
}

Swiper will automatically calculate slide dimensions based on slidesPerView and spaceBetween—letting it do its job fixes the alignment root cause.

2. Adjust Swiper JS Configuration

Update your initialization code to optimize for alignment and controlled partial slide visibility:

var mySwiper = new Swiper ('.swiper-container', {
  // Base settings
  slidesPerView: 1,
  spaceBetween: 30,
  freeMode: false,
  loop: true,
  centeredSlides: false, // Critical: Ensures slides align with container start
  lazy: true,
  mousewheel: { invert: true, },
  keyboard: { enabled: true, onlyInViewport: false, },
  scrollbar: { el: '.swiper-scrollbar', draggable: true, },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
  pagination: { el: '.swiper-pagination', type: 'progressbar', },

  // Breakpoint-specific tweaks
  breakpoints: {
    0: { 
      /* Mobile */
      slidesPerView: 1, 
      spaceBetween: 10, 
      slidesOffsetBefore: 0, 
      direction: 'vertical', 
    },
    767: { 
      /* Tablet (Vertical) */
      slidesPerView: 1.2, // Shows ~20% of the next slide
      spaceBetween: 20, 
      slidesOffsetBefore: 0, 
      direction: 'vertical', 
      autoHeight: true // Optional: Fixes inconsistent slide heights
    },
    1279: { 
      /* Desktop (Horizontal) */
      slidesPerView: 1.3, // Shows ~30% of the next slide
      spaceBetween: 20, 
      slidesOffsetBefore: 0,
      direction: 'horizontal' // Explicitly set horizontal layout
    }
  },
})

Key changes explained:

• centeredSlides: false: Guarantees slides snap perfectly to the container's left/top edge after scrolling stops.
• Fractional slidesPerView values: 1.2 for vertical tablet (20% of next slide visible) and 1.3 for desktop (30% visible)—adjust these decimals to tweak how much of the next slide shows.
• autoHeight: true (tablet): Fixes content cutoff if your vertical slides have varying heights.
• Cleaned duplicate settings: Removed the redundant keyboard declaration.

3. Verify Vertical Layout (If Needed)

If your vertical slides still have height issues, ensure your .swiper-container height is set to a flexible value (like 100vh instead of a fixed 965px) to adapt to content and screen size.

Why This Works #

By letting Swiper handle slide dimensions instead of forcing them, you restore its native alignment logic. The fractional slidesPerView values now work as intended—showing the full current slide and a controlled portion of the next one, while ensuring scroll stops align perfectly with the container edge.

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