Swiper Slider（Swiper Slider）

描述 (Description)

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)

OR

new Swiper(swiperContainer, parameters)

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

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

• swiperContainer - 它是HTMLElement or string swiper容器的HTMLElement or string ，它是必需的。

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

例如 -

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();

您可以在下表中看到不同的防尘方式和类型 -