Framework7 - Swiper 滑块

描述

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

以下 HTML 布局显示了滑动滑块 -

<!-- 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-container - 它是主滑块容器的必需元素，用于幻灯片和分页。

  • Swiper-wrapper - 它是附加包装幻灯片的必需元素。

  • swiper-slide - 它是一个单一的幻灯片元素，它可以包含任何 HTML 内部。

  • swiper-pagination - 分页项目符号是可选的，并且分页项目符号是自动创建的。

您可以使用 JavaScript 的相关方法来初始化 swiper -

myApp.swiper(swiperContainer,parameters)

或者

new Swiper(swiperContainer, parameters)

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

上面给出的方法包含以下参数 -

  • swiperContainer - 它是HTMLElement 或swiper 容器的字符串，并且是必需的。

  • 参数- 这些是可选元素，包含带有 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();

您可以在下表中看到刷卡器的不同方式和类型 -

序列号 刷卡器类型和描述
1 带分页的默认滑动器

它是一个现代的触摸滑块，默认情况下滑动器水平滑动。
2 垂直刷卡器

这也可以作为默认的滑动器，但它是垂直滑动的。
3 幻灯片之间有空间

此滑动器用于在两张幻灯片之间留出空间。
4 多个刷卡器

该滑动器在单个页面上使用多个滑动器。
5 嵌套滑动器

它是垂直和水平幻灯片的组合。
6 自定义控件

它用于自定义控件来选择或滑动任何幻灯片。
7 延迟加载

它可用于需要时间加载的多媒体文件。