【前端基础】2 - 5 Swiper

§2-5 Swiper

§2-5 Swiper

2-5.1 Swiper 简介

Swiper 是一个实现了各种不同样式的滑块的 JavaScript 插件。Swiper 提供的滑块具有流畅的过渡效果，支持自定义，样式丰富。

可在 Swiper 的主页找到 Swiper 的安装和使用方式，以及其所提供的滑块演示和 API 文档（见底部链接）。

2-5.2 使用方法

详细的使用方法请见官方文档（见底部链接）。

2-5.2.1 引入 Swiper

有许多种方式可以为你的网页引入 Swiper。这里介绍两种方式：

从 CDN 使用 Swiper：使用外部链接导入 Swiper 所依赖的样式表和 JavaScript 脚本；

在不使用离线资源的情况下，从 CDN 导入 Swiper：

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

若在浏览器中使用了 ES modules，可使用以下源：

<script type="module">
  import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'

  const swiper = new Swiper(...)
</script>

使用离线资源：下载 Swiper 的生产文件并导入到项目中。

2-5.2.2 添加 Swiper 的 HTML 布局

所有 Swiper 所提供的滑块都具有一定的 HTML 布局，这些布局可在官方演示中找到。可按需找到所需滑块，将布局复制到项目当中。

也可以为我们的网页添加基础的 Swiper 布局。

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

.swiper 是所有 Swiper 滑块容器都依赖的类。一般地，建议为需要应用 Swiper 滑块的容器添加自定义的类名，以更易于使用选择器找到指定的容器。这样做也更利于针对不同的 Swiper 容器添加自定义样式。

2-5.2.3 根据 API 自定义 Swiper 滑块

以一个垂直滑动，支持鼠标滚轮的滑块为例。

<body>
	<!-- Swiper -->
    <div class="swiper mySwiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
        </div>

        <!-- Scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>
</body>

页面 CSS：

html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

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

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

初始化 Swiper：

// Initialze swiper
const mySwiper = new Swiper('.mySwiper', {
    direction: 'vertical',

    scrollbar: {
        el: '.mySwiper .swiper-scrollbar'
    },

    mousewheel: {
        enabled: true
    }
});