swiper.js 移動端觸摸滑動插件

時間 2019-11-18

標籤 swiper.js swiper 移動觸摸滑動插件欄目 JavaScript 简体版

原文原文鏈接

API連接：javascript

http://www.swiper.com.cn/api/start/2014/1218/140.htmlhtml

<body>
　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide"><img src="images/1.jpg"></div>
　　　　　　<div class="swiper-slide"><img src="images/2.jpg"></div>
　　　　　　<div class="swiper-slide"><img src="images/3.jpg"></div>
　　　　</div>
　　　　
　　　　<div class="swiper-pagination"></div>
　　</div>
　　<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
</body>java

<script>
var mySwiper = new Swiper ('.swiper-container', {
　　direction: 'horizontal',
　　loop: false,
　　initialSlide:1, //初始化頁面的索引
　　// 若是須要分頁器
　　pagination: '.swiper-pagination',
　　//3d翻頁
　　/*
　　coverflow是相似於蘋果將多首歌曲的封面以3D界面的形式顯示出來的方式。coverflow效果參數，可選值：
　　rotate：slide作3d旋轉時Y軸的旋轉角度。默認50。
　　stretch：每一個slide之間的拉伸值，越大slide靠得越緊。默認0。
　　depth：slide的位置深度。值越大z軸距離越遠，看起來越小。默認100。
　　modifier：depth和rotate和stretch的倍率，至關於depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數的效果越明顯。默認1。
　　slideShadows：開啓slide陰影。默認 true。
　　*/
　　effect : 'coverflow',
　　slidesPerView: 2,
　　centeredSlides: true,
　　coverflow: {
　　rotate: 0,
　　stretch: 50,
　　depth: 60,
　　modifier: 2,
　　slideShadows : false
}
})
</script>api

相關文章

相關標籤/搜索

移動端適配

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<