var swiper = new Swiper('.swiper-container', {
direction: 'horizontal', //默认是横向,可以设置竖向vertical Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。
history: 'love', //开始浏览器前进后退 没什么用
data:1,
pagination: '.swiper-pagination', //分页器
paginationClickable :true, // 分液器换图
loop:true, //无限循环
nextButton: '.swiper-button-next',//前进后退按钮
prevButton: '.swiper-button-prev',
autoplay: 1000, // 自动轮播
initialSlide :1, // 初始化跳到第几个轮播图
speed:800, // 运动缓慢
autoplayDisableOnInteraction : true, //停止自动轮播
grabCursor : true, //抓手形状
parallax : true, //如需要开启视差效果(相对父元素移动),设置为true并在所需要的元素上增加data- swiper-parallax属性。
hashnav:true, // 今天研究到这 这个没实现
hashnavWatchState:true, //和上面的关联 没明白
replaceState:true, //代替上面两个
setWrapperSize :true, //支持css3display:fixebox布局
virtualTranslate : true, //让轮播停止运行 其他正常
nextButton: '.swiper-button-next',
width : 800, //你的slide宽度 这个参数会使自适应失效。高度也是
// 全屏 width : window.innerWidth,
roundLengths : true, // 当你设定slide宽为76%时,则计算出来结果为1094.4,开启后宽度取整数1094
autoHeight: true, //高度随内容变化
nested:true, // 父元素和子元素嵌套 相当于两个swiper
freeMode : true, //这个参数为true后,滑到哪里就是哪里
freeModeMomentumBounceRatio : 5, //反弹 值越大 依赖上面那个
slidesOffsetBefore : 100, //设置与左边框间隔距离
effect : 'cube', // 可设置为"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)
cube: { // 这个是方块效果 网页上有个广告效果
slideShadows: true,
shadow: true,
shadowOffset: 150,
shadowScale: 0.8
},
preventLinksPropagation : false, //阻止click冒泡。拖动Swiper时阻止click事件。
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
slidesPerView: 3, // 下面这两个只有在3d留用到
centeredSlides: true,
lazyLoading : true, //设为true开启图片延迟加载,使preloadImages无效。 比较麻烦
zoom : true, //焦距功能:双击slide会放大,并且在手机端可双指触摸缩放。
zoomMax :5,
zoomMin :2,
var Swiper1 = new Swiper('#swiper-container1',{ 设置这个后两个swiper可实现方向倒转 实用 })
var Swiper2 = new Swiper('#swiper-container2',{})
// Swiper1.params.control = Swiper2;
// Swiper1.params.controlInverse=true;
})
这些东西用到时直接看文档就行,记录的习惯..