Framework7 - 滑动滑块

说明

滑动滑块是最强大、最现代的触摸滑块，并带有许多功能，可集成到 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 滑块 −

• swiper-container − 它是主滑块容器的必需元素，用于幻灯片和分页。

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

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

• swiper-pagination −对于分页项目符号而言，它是可选的，并且是自动创建的。

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

myApp.swiper(swiperContainer,parameters)

或

new Swiper(swiperContainer,parameters)

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

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

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

• parameters −这些是包含带有滑动参数的对象可选元素。

例如 −

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

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

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

// 在这里您可以使用所有滑块方法，例如:
mySwiper.slideNext();

您可以在下表中看到 swiper 的不同方式和类型 −