framework7教程

Framework7 Swiper

说明

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-它是 swiper 容器的 HTMLElement 或string,并且是必需的。 parameters-这些是包含带有 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();
您可以在下表中看到不同的刷卡方式和类型-
S.No Swiper 类型和描述
1 带分页的默认 Swiper
这是一个现代的触摸滑块,默认情况下,swiper 水平滑动。
2 Vertical Swiper
这个也可以作为默认的swiper,但它是垂直滑动的。
3 在幻灯片之间留有空间
此滑动条用于在两张幻灯片之间留出空间。
4 多个 Swipers
此 swiper 在一个页面上使用多个 swiper。
5 嵌套 Swipers
它是垂直和水平幻灯片的组合。
6 自定义控件
用于自定义控件选择或滑动任何幻灯片。
7 延迟加载
可用于多媒体文件,加载时间较长。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4