Swiper.js - 如何显示 2 张半幻灯片和 2 张完整幻灯片答案

【问题标题】：Swiper.js - how to show 2 half slides and 2 full slidesSwiper.js - 如何显示 2 张半幻灯片和 2 张完整幻灯片
【发布时间】：2022-07-11 15:26:51
【问题描述】：

我想使用 swiper.js 并在中心显示 2 张完整幻灯片，然后在两侧显示半张幻灯片。我认为这是可能的，但不知道怎么做。

谁能给点建议？想要重新创建以下内容。

谢谢！

【问题讨论】：

标签： slider swiper swiper.js

【解决方案1】：

无法像这样将two slides 居中（centeredSlides 转为活动幻灯片（一张幻灯片）。

“hack”想法 - 每个视图使用 4 张幻灯片并在滑动器周围添加 负左/右页边距 div。

为了避免overflow-x问题，这应该是结构：

div (overflow-x: hidden;)
--- extra wrapper (with negative l/r margin)
------ swiper

** "build in next/prev" 箭头将中断（您应该编辑核心 CSS - 或 - 使用自定义下一个/上一个）。

片段：

body {
  background: #eee;
  margin: 0px;
  font-size: 14px;
  color: #000;

}

b{
  color: red;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  height: 120px!important;
  align-items: center;
}


main{
  margin-right: -10%;
  margin-left: -10%;
}

/* fix arrows position */
.swiper-button-next{
  right: 10%!important;
}

.swiper-button-prev{
  left: 10%!important;
}

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<body>
  <br>
  <!-- Swiper -->
  <div style="overflow-x: hidden;">
  <main>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2 - <b>center</b></div>
        <div class="swiper-slide">Slide 3 - <b>center</b></div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div><!-- end swiper wrapper-->
      
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
    </div><!-- end swiper -->
  </main>
  </div>

  <!-- Swiper JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 4,
      slidesPerGroup: 1,
      centeredSlides: false,
      loop: true,
      slideToClickedSlide: true,
      spaceBetween: 10,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
        // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
    });
  </script>
</body>
</html>

【讨论】：

【解决方案2】：

如果您想显示 1 张完整幻灯片和第 2 张半幻灯片你可以像这样使用配置

slidesPerView: 1.2, 在 swiper 8.3 版中工作

【讨论】：