描述
swiper滑块是最强大和最现代化的触摸滑块,并且具有很多功能的Framework7.
以下HTML布局显示swiper滑块 :
Slide 1Slide 2Slide 3... other slides ...
以下类用于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 | 延迟加载 它可用于多媒体文件,这需要时间加载. |