SwiperJS 中的两端带部分幻灯片的幻灯片显示：分步指南

在两端设置带部分幻灯片的 SwiperJS slidesPerView

前言

构建具有视觉吸引力的幻灯片显示对于任何 web 应用程序至关重要。SwiperJS 是一个流行的 JavaScript 库，可以轻松创建动态幻灯片。在某些情况下，你可能需要在幻灯片显示的两端显示部分幻灯片，这可以增强用户的浏览体验。

了解 SwiperJS 配置选项

要实现此效果，我们需要了解以下 SwiperJS 配置选项：

• slidesPerView： 控制视口中同时显示的幻灯片数量。
• slidesPerGroup： 指定一次滑动中同时移动的幻灯片数量。
• freeMode： 允许幻灯片平滑滑动，不受 slidesPerView 限制。

逐步实现

1. 初始化 Swiper 实例

var swiper = new Swiper('.mySwiper', {
  slidesPerView: 4.5,  // 设置部分幻灯片
  slidesPerGroup: 1,
  freeMode: true,
});

2. 设置幻灯片可见性

使用 CSS 来控制部分幻灯片的可见性：

.swiper-slide-visible:not(.swiper-slide-fully-visible) {
  opacity: 0.3;
  pointer-events: none;
}

示例代码

结合这些配置，你可以创建以下 HTML、CSS 和 JavaScript 代码：

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="slide1.jpg"></div>
    <div class="swiper-slide"><img src="slide2.jpg"></div>
    <div class="swiper-slide"><img src="slide3.jpg"></div>
    <div class="swiper-slide"><img src="slide4.jpg"></div>
  </div>
</div>

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

.swiper-slide {
  width: 25%;
  height: 100%;
}

.swiper-slide-visible:not(.swiper-slide-fully-visible) {
  opacity: 0.3;
  pointer-events: none;
}

var swiper = new Swiper('.mySwiper', {
  slidesPerView: 4.5,
  slidesPerGroup: 1,
  freeMode: true,
});

结论

通过结合 SwiperJS 的 slidesPerView、slidesPerGroup 和 freeMode 选项，你可以轻松创建带有部分幻灯片的幻灯片显示。这种技术允许你在两端显示幻灯片的预览，从而增强用户体验。

常见问题解答

1. 如何更改部分幻灯片的可见性百分比？

• 编辑 CSS 中的 opacity 值。

2. 是否可以自定义部分幻灯片的过渡效果？

• 是的，可以通过 transition-duration 和 transition-timing-function CSS 属性。

3. 如何在移动设备上启用平滑滑动？

• 确保在 <meta> 标签中包含 touch-action: pan-y。

4. 如何在两端显示多个部分幻灯片？

• 增加 slidesPerView 值并根据需要调整 CSS。

5. 如何禁用部分幻灯片的效果？

• 将 slidesPerView 设置为整数，例如 4 或 5。