var swiper = new Swiper('.swiper-container', {
direction: 'horizontal', //默認(rèn)是橫向,可以設(shè)置豎向vertical Slides的滑動(dòng)方向,可設(shè)置水平(horizontal)或垂直(vertical)。
history: 'love', //開始瀏覽器前進(jìn)后退 沒什么用
data:1,
pagination: '.swiper-pagination', //分頁器
paginationClickable :true, // 分液器換圖
loop:true, //無限循環(huán)
nextButton: '.swiper-button-next',//前進(jìn)后退按鈕
prevButton: '.swiper-button-prev',
autoplay: 1000, // 自動(dòng)輪播
initialSlide :1, // 初始化跳到第幾個(gè)輪播圖
speed:800, // 運(yùn)動(dòng)緩慢
autoplayDisableOnInteraction : true, //停止自動(dòng)輪播
grabCursor : true, //抓手形狀
parallax : true, //如需要開啟視差效果(相對(duì)父元素移動(dòng)),設(shè)置為true并在所需要的元素上增加data- swiper-parallax屬性。
hashnav:true, // 今天研究到這 這個(gè)沒實(shí)現(xiàn)
hashnavWatchState:true, //和上面的關(guān)聯(lián) 沒明白
replaceState:true, //代替上面兩個(gè)
setWrapperSize :true, //支持css3display:fixebox布局
virtualTranslate : true, //讓輪播停止運(yùn)行 其他正常
nextButton: '.swiper-button-next',
width : 800, //你的slide寬度 這個(gè)參數(shù)會(huì)使自適應(yīng)失效。高度也是
// 全屏 width : window.innerWidth,
roundLengths : true, // 當(dāng)你設(shè)定slide寬為76%時(shí),則計(jì)算出來結(jié)果為1094.4,開啟后寬度取整數(shù)1094
autoHeight: true, //高度隨內(nèi)容變化
nested:true, // 父元素和子元素嵌套 相當(dāng)于兩個(gè)swiper
freeMode : true, //這個(gè)參數(shù)為true后,滑到哪里就是哪里
freeModeMomentumBounceRatio : 5, //反彈 值越大 依賴上面那個(gè)
slidesOffsetBefore : 100, //設(shè)置與左邊框間隔距離
effect : 'cube', // 可設(shè)置為"fade"(淡入)"cube"(方塊)"coverflow"(3d流)"flip"(3d翻轉(zhuǎn))
cube: { // 這個(gè)是方塊效果 網(wǎng)頁上有個(gè)廣告效果
slideShadows: true,
shadow: true,
shadowOffset: 150,
shadowScale: 0.8
},
preventLinksPropagation : false, //阻止click冒泡。拖動(dòng)Swiper時(shí)阻止click事件。
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
slidesPerView: 3, // 下面這兩個(gè)只有在3d留用到
centeredSlides: true,
lazyLoading : true, //設(shè)為true開啟圖片延遲加載,使preloadImages無效。 比較麻煩
zoom : true, //焦距功能:雙擊slide會(huì)放大,并且在手機(jī)端可雙指觸摸縮放。
zoomMax :5,
zoomMin :2,
var Swiper1 = new Swiper('#swiper-container1',{ 設(shè)置這個(gè)后兩個(gè)swiper可實(shí)現(xiàn)方向倒轉(zhuǎn) 實(shí)用 })
var Swiper2 = new Swiper('#swiper-container2',{})
// Swiper1.params.control = Swiper2;
// Swiper1.params.controlInverse=true;
})