用于初始化一个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>