Framework7滑动滑块 Framework7滑动滑块|Framework7

本文概述

滑动滑块的HTML布局
使用JavaScript初始化Swiper
用HTML初始化Swiper

Framework7提供了滑动滑块, 这是一个非常强大且现代的触摸滑块。它还提供了很多功能。
滑动滑块的HTML布局

< !-- Slider container --> < div class="swiper-container"> < !-- Slides wrapper --> < 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> < !-- Pagination, if required --> < div class="swiper-pagination"> < /div> < /div>

【Framework7滑动滑块】这里：
swiper-container：它是带有滑块和分页的主要滑块容器类。必填元素
swiper-wrapper：这是幻灯片的附加包装。必填元素
swiper-slide：它是单个滑动元素。里面可以包含任何HTML
swiper-pagination：它是带有分页项目符号的容器, 在其中可以自动创建分页项目符号。它是一个可选元素。
使用JavaScript初始化Swiper可以使用以下与JavaScript相关的方法来初始化Swiper：

myApp.swiper(swiperContainer, parameters)ORnew Swiper(swiperContainer, parameters)

参数说明：
swiperContainer：它是HTMLElement或swiper容器的字符串, 是必需的。
参数：这些是包含带有滑动参数的对象的可选元素。
注意：以上两种方法均可用于使用选项初始化滑块。例如：

var mySwiper = app.swiper('.swiper-container', {speed: 400, spaceBetween: 100});

用HTML初始化Swiper滑行滑块的类型
Framework7中有几种不同类型的刷卡器：

指数	刷卡类型	描述
1)	分页的默认刷卡器	这是一款现代的触摸滑块, 滑动器可水平滑动。这是默认的刷卡器。
2)	垂直刮水器	这也是默认的滑动器, 但垂直滑动。
3)	幻灯片之间有间隔	该滑动器用于在两个幻灯片之间留出空间。
4)	多刷	该刷卡器在单个页面上使用多个刷卡器。
5)	Nested Swipers	它是垂直和水平幻灯片的组合。
6)	Custom Controls	它用于自定义控件来选择或滑动任何幻灯片。
7)	延迟加载	它可以用于多媒体文件, 这需要花费一些时间来加载。