Swiper滑块

Framework7带有强大且最现代的触摸滑块 -Swiper滑块具有超级灵活的配置和大量的功能。

Swiper滑块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>

Where:

swiper- 主滑块容器带有幻灯片和分页。必需元素
- swiper-wrapper- 用于幻灯片的附加包装器。必需元素
  - swiper-slide- 单个幻灯片元素。可以包含任何HTML
- swiper-pagination- 带有分页子弹的容器。注意，分页子弹将自动创建。可选元素

Swiper应用方法

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

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

swiperEl - HTMLElement或字符串(使用CSS选择器)滑块容器HTML元素的。必需。
参数 - 对象- 带有Swiper参数的对象。可选。
方法返回初始化的Swiper实例

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

swiperEl - HTMLElement或字符串(使用CSS选择器)滑块容器HTML元素的。必需。

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

swiperEl - HTMLElement或字符串(使用CSS选择器)滑块容器HTML元素的。必需。

例如：

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

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

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

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

Swiper 元素

自从Framework7 v8开始，强烈建议使用Swiper 元素，它提供了一种更简单的方法在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滑块HTML布局
Swiper应用方法
Swiper API（参数、方法和属性）
Swiper 元素
示例