swiper框架

用于初始化一个Swiper,返回初始化后的Swiper实例。
swiperContainer : 必选,HTML元素或者string类型,Swiper容器的css选择器,例如“.swiper-container”。
parameters : 可选,参见配置选项

列:<script> var mySwiper = new Swiper(‘.swiper-container‘, { autoplay: 5000,//可选选项,自动滑动 }) </script>

initialSlide

设定初始化时slide的索引。

initialSlide参数

类型:
number
默认:
0
举例:
2
列:<script language="javascript"> var mySwiper = new Swiper(‘.swiper-container‘,{ initialSlide :2, }) </script>

direction

Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。

direction参数

类型:
string
默认:
horizontal
举例:
vertical
列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ direction : ‘vertical‘, }) </script>

speed

滑动速度,即slider自动滑动开始到结束的时间(单位ms)。

列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ autoplay : 3000, speed:300, }) </script>

autoplay

自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
用户操作后autoplay停止,参考基本选项 autoplayDisableOnInteraction

列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ autoplay : 5000, }

//反方向自动切换简单示例 var mySwiper = new Swiper(‘.swiper-container‘,{ loop : true, }) setInterval("mySwiper.slidePrev()", 2000); </script>

autoplayDisableOnInteraction

用户操作swiper之后,是否禁止autoplay。默认为true:停止。
如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
操作包括触碰,拖动,点击pagination等。

autoplayDisableOnInteraction参数

类型:
boolean
默认:
true
举例:
false
列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ autoplay : 5000, autoplayDisableOnInteraction : false, }) </script>

grabCursor

设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同)

grabCursor参数

类型:
boolean
默认:
false
举例:
true
列:<script language="javascript"> var mySwiper = new Swiper(‘.swiper-container‘,{ grabCursor : true, }) </script>

setWrapperSize

Swiper从3.0开始使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽高,在对flexbox布局的支持不是很好的浏览器中可能需要用到

<script> var mySwiper = new Swiper(‘.swiper-container‘,{ setWrapperSize :true, }) </script>

virtualTranslate

虚拟位移。当你启用这个参数,Swiper除了不会移动外其他的都像平时一样运行,仅仅是不会在Wrapper上设置位移。当你想自定义一些slide切换效果时可以用。
启用这个选项时onSlideChange和onTransition事件失效。

列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ virtualTranslate : true, }) </script>

a11y

辅助,无障碍阅读。开启本参数为屏幕阅读器添加语音提示等信息,方便视觉障碍者。基于ARIA标准。

prevSlideMessage    类型:string  默认:‘Previous slide‘    在屏幕阅读器为上一页按钮添加信息。
nextSlideMessage    类型:string  默认: ‘Next slide‘     在屏幕阅读器为下一页按钮添加信息。
firstSlideMessage    类型:string  默认: ‘This is the first slide‘    在屏幕阅读器当处于第一个slide为上一页按钮添加信息。
lastSlideMessage    类型:string  默认: ‘This is the last slide‘    在屏幕阅读器当处于最后一个slide为下一页按钮添加信息。
paginationBulletMessage;   类型:string  默认: ‘Go to slide {{index}}‘    在屏幕阅读器为分页器小点添加信息。

列:<script language = "javascript"> var mySwiper = new Swiper(‘.swiper-container‘, { nextButton: ‘.swiper-button-next‘, prevButton: ‘.swiper-button-prev‘, pagination : ‘.swiper-pagination‘, a11y: true, prevSlideMessage: ‘Previous slide‘, nextSlideMessage: ‘Next slide‘, firstSlideMessage: ‘This is the first slide‘, lastSlideMessage: ‘This is the last slide‘, paginationBulletMessage:‘Go to slide {{index}}‘ }) </script>

width

强制Swiper的宽度,当你的Swiper在隐藏状态下初始化时才用得上。这个参数会使自适应失效。

列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ width : 800, //你的slide宽度 //全屏 width : window.innerWidth, }) </script>

height

强制Swiper的高度,当你的Swiper在隐藏状态下初始化时才用得上。这个参数会使自适应失效。

列:<script> var mySwiper = new Swiper(‘.swiper-container‘, { direction: ‘vertical‘, heigth: 300,//你的slide高度 //全屏 height : window.innerHeight, }) </script>

roundLengths

设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字模糊。

列:<script> var mySwiper = new Swiper(‘.swiper-container‘,{ roundLengths : true, }) </script>

slidesOffsetBefore

设定slide与左边框的预设偏移量(单位px)。

列:<script language="javascript"> var mySwiper = new Swiper(‘.swiper-container‘,{ slidesOffsetBefore : 100, }) </script>

slidesOffsetAfter

设定slide与右边框的预设偏移量(单位px)。

列:<script language="javascript"> var mySwiper = new Swiper(‘.swiper-container‘,{ slidesOffsetAfter : 100, }) </script>

时间: 2024-07-29 16:59:26

swiper框架的相关文章

日常整理的一些网址

框架应用集 手机框架 ratchet 框架 http://cnratchet.com/ jquery mobile 框架 jquerymobile.weebly.com MUI 框架 http://dev.dcloud.net.cn/mui/ SUI Mobile 框架 http://m.sui.taobao.org/ 客户端框架 uikit框架 http://www.getuikit.net/ bootstarp框架 http://www.bootcss.com/ http://v3.boot

swipe和swiper的区别

swipe.js--移动WEB页面内容触摸滑动类库 参考http://www.jiawin.com/swipe-mobile-touch-slider 1.swipe只提供简单轮播切换,底部的圆点颜色切换需要重新写html,自定义方便. 2.当你用点击或者手势控制了之后,轮播图就不会自动滚动了,需要将swipe.js插件源代码进行修改: function stop() { //delay = 0; delay = options.auto > 0 ? options.auto : 0; clea

移动前端一些常用的框架

移动端主流的js框架: 1.zeptiojs http://zeptojs.com/ 2.jGestures http://jgestures.codeplex.com/ 3.swiper http://www.swiper.com.cn/ 4.iScroll.js http://cubiq.org/iscroll-5 http://iscrolljs.com/ 移动开发流行的框架   1.jqueryMobile http://api.jquerymobile.com/ 2. app fram

swiper初步探索

最近要做一个效果,初步想到了使用swiper,不过貌似最后并不能完全通过swiper来实现,整整试了一天的时间都没有试出来,真是...压力很大,不过自己选的路,总要坚持走下去了. Swiper(Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统也有着良好的用户体验.

Swiper 中文API手册(share)

翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解Swiper Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及现代桌面浏览器也有

Swiper.js使用教程

上个礼拜,通过在制作公司产品介绍弹出框的过程,使用了强大的Swiper.js,官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps).主要是为IOS而设计的,同时,在Android.WP8系统以及PC端的浏览器也有着

微信公众号 几种移动端UI框架介绍

微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计,可以令用户在HTML5应用中的使用感知更加统一. 组件包含button.cell.dialog. progress, toast.article.icon等等. 资源 官方Demo:https://weui.io/ Github:https://Github.com/weui/weui (★1340

使用swiper来实现轮播图

swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://www.swiper.com.cn/usage/index.html   它很简明地告诉了你应该如何去搭建这样的框架. 2.http://www.swiper.com.cn/api/   这里讲述了我们应该如何去设置更多的功能. 下面是一个简单的例子,可做参考. <!DOCTYPE html> <html> <h

Swiper之初识

何为Swiper?Swiper是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(native apps), 主要是为了IOS而生的,同时,在Android.WP8系统以及现代桌面浏览器也有着良好的体验. Swiper的特征:1.触控运动,这个功能对于开发桌面网站会很有用.简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件.2.水平滑动(horizontal)\垂直滑动(ve