即使在调整滑动器大小时如何保持幻灯片答案

【问题标题】：How to keep slides even when resizing swiper即使在调整滑动器大小时如何保持幻灯片
【发布时间】：2021-01-04 12:02:09
【问题描述】：

在桌面尺寸中，中间有一张幻灯片，左右各有一张。在移动尺寸中，只有一张幻灯片可见。到这里没问题。

但是，如果我将浏览器大小调整为移动设备大小，然后将其调整为桌面大小，我会看到 5 张幻灯片。调整大小后如何保留？

拜托，任何人都可以向我推荐。 https://codepen.io/lpla/pen/PoGRgVQ

HTML

<section class="main_section section_3">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide bg1">
      </div>
      <div class="swiper-slide bg2">
      </div>
      <div class="swiper-slide bg3">
      </div>
      <div class="swiper-slide bg4">
      </div>
    </div>
  </div>
</section>

SCSS

.section_3 {
  padding-bottom: 160px; position: relative;
    .swiper-container { padding-top: 70px; }
    .swiper-slide {
    width: 62.5%; height: 545px; margin: 0; transition: all .3s; overflow: hidden; margin: 0 60px; position: relative;
    
    &.bg1 {
      background: url(https://dummyimage.com/1200x798/000/fff) no-repeat center/cover;
    }
    &.bg2 {
      background: url(https://dummyimage.com/1200x798/ddd/000e0e) no-repeat center/cover;
    }
    &.bg3 {
      background: url(https://dummyimage.com/1200x798/e0e/fff) no-repeat center/cover;
    }
    &.bg4 {
      background: url(https://dummyimage.com/1200x798/283d0e/4ff0f0) no-repeat center/cover;
    }
        &:not(.swiper-slide-active) { opacity: 0.5; }
        &.swiper-slide-active { position: relative; margin-top: -70px; }
        img { width: 100%; }
    }
}

var swiper = new Swiper('.section_3 .swiper-container', {
  loop: true,
  slidesPerView: 'auto',
  spaceBetween: 0,
  speed: 700,
  centeredSlides: true,
  slideToClickedSlide: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    1280: {
      slidesPerView: '2',
      centeredSlides: false
    },
    960: {
      slidesPerView: '1',
      centeredSlides: false
    }
  }
});

【问题讨论】：

标签： css swiper

【解决方案1】：

我解决了这个问题。错误的原因是 slidesPerView:'auto'。我做了一些代码修复，例如输入数字而不是 auto 并将边距更改为 javscript。

var swiper = new Swiper('.section_3 .swiper-container', {
  loop: true,
  slidesPerView: 2,
  spaceBetween: 30,
  speed: 700,
  centeredSlides: true,
  slideToClickedSlide: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    1280: {
      // slidesPerView: '2',
      // centeredSlides: false,
                // slidesPerView: 2
    },
    960: {
      // slidesPerView: '1',
      centeredSlides: false,
                slidesPerView: 1,
                spaceBetween: 0
    }
  }
});

https://codepen.io/lpla/pen/yLaKdeg

【讨论】：