SwiperJS垂直模式详解：如何从底部向上滑动

在 SwiperJS 中启用垂直模式：从底部向上滑动

简介

SwiperJS 是一个流行的 JavaScript 库，用于在网页和移动应用程序中创建交互式幻灯片。它提供了许多强大的功能，包括在水平和垂直方向上滑动的能力。虽然在水平方向上启用垂直模式很简单，但启用垂直模式却可能有些棘手。本教程将详细介绍如何在 SwiperJS 中启用垂直模式并从底部向上滑动。

问题

如果您使用 SwiperJS 在垂直方向上显示元素，您可能会注意到元素总是从顶部向下滑动。这可能会导致数字或列表等元素看起来像是倒置的。

解决方案

要启用垂直模式并从底部向上滑动，我们需要覆盖 SwiperJS 的默认行为。为此，我们将使用 CSS。

步骤 1：添加 CSS 覆盖

在您的 CSS 文件中添加以下代码：

.swiper-wrapper {
  flex-direction: column-reverse;
}

.swiper-slide {
  margin-bottom: 1rem;
}

• .swiper-wrapper 样式更改了滑动容器的 flexbox 排列方向。
• .swiper-slide 样式添加了底部边距，以确保滑动元素之间有空间。

步骤 2：设置方向属性

确保在初始化 Swiper 实例时将 direction 属性设置为 vertical：

const swiper = new Swiper('.mySwiper', {
  direction: 'vertical',
  // 其他选项...
});

代码示例

以下是使用 SwiperJS 在垂直模式下从底部向上滑动的完整代码示例：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

<script>
  const swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 13,
    className: "mySwiper",
    centeredSlides: true,
    allowTouchMove: false,
    modules: [Autoplay],
    speed: 5000,
    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    }
  });
</script>

CSS 覆盖

.mySwiper .swiper-wrapper {
  flex-direction: column-reverse;
}

.mySwiper .swiper-slide {
  margin-bottom: 1rem;
}

常见问题解答

1. 我可以设置从顶部向下滑动的垂直模式吗？

不，使用 SwiperJS 无法从顶部向下滑动。

2. 为什么在垂直模式下，我的元素重叠？

确保您已添加了 margin-bottom 样式，以在幻灯片元素之间留出空间。

3. 如何调整垂直模式下的滑动速度？

通过设置 speed 选项来调整滑动速度，以毫秒为单位。

4. 我可以在垂直模式下启用自动播放吗？

是的，可以使用 autoplay 选项启用自动播放。

5. 如何在垂直模式下禁用触摸移动？

通过设置 allowTouchMove 选项为 false 来禁用触摸移动。

结论

通过遵循本教程中的步骤，您将能够在 SwiperJS 中启用垂直模式，并从底部向上滑动。这将使您能够在网页和移动应用程序中创建美观且功能强大的垂直幻灯片。