Framework7 - Swiper Slider

描述

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)

OR

new Swiper(swiperContainer, parameters)

这两种方法都用于初始化带选项的滑块.

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

• swiperContainer : 它是swiper容器的 HTMLElement或string ，它是必需的.

• 参数 : 这些是包含带有滑块参数的对象的可选元素.

例如 :

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的不同方式和类型 :

S.No	Swiper Types&说明
1	带有分页的默认狙击手 这是一个现代触摸滑块，默认情况下，狙击手水平滑动.
2	垂直Swiper 这个也可以作为默认的swiper，但它会垂直滑动.
3	幻灯片之间的空间 此滑块用于在两张幻灯片之间留出空间.
4	多个Swipers 这个swiper在一个页面上使用多个swipers.
5	嵌套式Swipers 它是垂直和水平幻灯片的组合.
6	自定义控件 它用于自定义控件选择或滑动任何幻灯片.
7	延迟加载 它可用于多媒体文件，这需要时间加载.