Framework7 - Swiper 滑块

描述

Swiper 滑块是最强大、最现代的触摸滑块，它在 Framework7 中具有许多功能。

下面的 HTML 布局显示了 Swiper 滑块：

<!-- Container class for slider -->
<div class = "swiper-container">
   <!-- Wrapper class for slider -->
   <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>
   
   <!-- Define pagination, if it is required -->
   <div class = "swiper-pagination"></div>
</div>

Swiper 滑块使用以下类：

• swiper-container - 这是主滑块容器的必需元素，用于容纳滑块和分页。

• swiper-wrapper - 这是额外包装滑块的必需元素。

• swiper-slide - 这是一个单个滑块元素，可以在其中包含任何 HTML 内容。

• swiper-pagination - 这是可选的分页点，会自动创建。

您可以使用相关的 JavaScript 方法初始化 Swiper：

myApp.swiper(swiperContainer,parameters)

或者

new Swiper(swiperContainer, parameters)

这两种方法都用于使用选项初始化滑块。

上述方法包含以下参数：

• swiperContainer - 这是HTMLElement 或字符串，表示 Swiper 容器，是必需的。

• parameters - 这些是可选元素，包含带有 Swiper 参数的对象。

例如：

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

可以访问 Swiper 实例，滑块容器的swiper属性具有以下 HTML 元素：

var mySwiper = $$('.swiper-container')[0].swiper;

// Here you can use all slider methods like:
mySwiper.slideNext();

您可以在下表中看到不同类型的 Swiper：