1. WIKI教程
2. 学习Framework7
3. Framework7 - Swiper Slider( Swiper Slider)

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

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

S.No	Swiper类型和描述
1	默认Swiper与分页 默认情况下，它是一个现代触摸滑块和水平滑动刷卡。
2	垂直Swiper 这个也作为默认的swiper工作，但它垂直滑动。
3	幻灯片之间的空间 该滑动器用于在两个滑块之间留出空间。
4	多个Swipers 该swiper在一个页面上使用多个swipers。
5	嵌套Swipers 它是垂直和水平滑块的组合。
6	自定义控件 它用于自定义控件以选择或滑动任何幻灯片。
7	延迟加载 它可以用于多媒体文件，这需要时间来加载。