开发手册 欢迎您!
软件开发者资料库

Framework7 - Swiper Slider

Framework7 Swiper Slider - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

描述

swiper滑块是最强大和最现代化的触摸滑块,并且具有很多功能的Framework7.

以下HTML布局显示swiper滑块 :

                  Slide 1
      Slide 2
      Slide 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.NoSwiper Types&说明
1带有分页的默认狙击手

这是一个现代触摸滑块,默认情况下,狙击手水平滑动.

2垂直Swiper

这个也可以作为默认的swiper,但它会垂直滑动.

3幻灯片之间的空间

此滑块用于在两张幻灯片之间留出空间.

4多个Swipers

这个swiper在一个页面上使用多个swipers.

5嵌套式Swipers

它是垂直和水平幻灯片的组合.

6自定义控件

它用于自定义控件选择或滑动任何幻灯片.

7延迟加载

它可用于多媒体文件,这需要时间加载.