Swiper 滑动条

Framework7 随附有功能强大且先进的触控滑块 - Swiper Slider，具有超级灵活的配置和许多功能。

Swiper Slider HTML 布局

Swiper HTML 布局非常简单

<!-- Slider container -->
<div class="swiper">
    <!-- Slides 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>
        ... other slides ...
    </div>
    <!-- Pagination, if required -->
    <div class="swiper-pagination"></div>
</div>

其中

swiper - 带有幻灯片和分页的主滑块容器。必需的元素
- swiper-wrapper - 幻灯片的附加包裹器。必需的元素
  - swiper-slide - 单个幻灯片元素。可包含任何内部 HTML
- swiper-pagination - 带有分页项目符号的容器。请注意，分页项目符号将自动创建。可选元素

Swiper 应用程序方法

现在，当我们拥有 Swiper' HTML 时，我们需要初始化它。我们需要使用相关的应用程序方法

app.swiper.create(swiperEl, parameters)- 使用选项初始化滑块

swiperEl - HTMLElement 或 string（带有 CSS 选择器）的 swiper 容器 HTML 元素。必需的。
parameters - object - 带有 Swiper 参数的对象。可选的.
方法返回初始化后的 Swiper 实例

app.swiper.destroy(swiperEl)- 销毁 Swiper 实例

swiperEl - HTMLElement 或 string（带有 CSS 选择器）的 swiper 容器 HTML 元素。必需的。

app.swiper.get(swiperEl)- 按 HTML 元素获取 Swiper 实例

swiperEl - HTMLElement 或 string（带有 CSS 选择器）的 swiper 容器 HTML 元素。必需的。

例如

var swiper = app.swiper.create('.swiper', {
    speed: 400,
    spaceBetween: 100
});

Swiper API（参数、方法和属性）

查看 Swiper API 网站以获取最相关的 API 参数和方法。

Framework7 的 Swiper 版本不包含历史记录和哈希导航模块

Swiper 元素

自 Framework7 v8 以来，强烈建议使用 Swiper Element，它提供了更容易的方法来使用 HTML 中的参数定义 Swiper，并且 Swiper 自定义元素已在 Framework7 中注册。

示例

swiper-multiple.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Multiple Swipers</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">1 Slide Per View, 50px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">2 Slides Per View, 20px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="20" slides-per-view="2">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">3 Slides Per View, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" slides-per-view="3">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <div class="block-title">Auto Slides Per View + Centered</div>
    <swiper-container pagination class="demo-swiper-multiple demo-swiper-multiple-auto" space-between="10"
      slides-per-view="auto">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>


    <div class="block-title">Vertical, 10px Between</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="10" direction="vertical">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
    </swiper-container>

    <div class="block-title">Slow speed</div>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50" speed="900">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

  </div>
</div>

改进此文档

此页面上

Swiper Slider HTML 布局
Swiper 应用程序方法
Swiper API（参数、方法和属性）
Swiper 元素
示例