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;
})