142.Python修煉之路【147-前端-移動端庫和框架-swiper】2018.08.04
阿新 • • 發佈:2018-12-13
swiper
swiper.js是一款成熟穩定的應用於PC端和移動端的滑動效果外掛,一般用來觸屏焦點圖、觸屏整屏滾動等效果。 swiper分為2.x版本和3.x版本,2.x版本支援低版本瀏覽器(IE7),3.x放棄支援低版本瀏覽器,適合應用在移動端。
2.x版本中文網址:http://2.swiper.com.cn/
3.x版本中文網地址:http://www.swiper.com.cn/
swiper使用方法:
<script type="text/javascript" src="js/swiper.min.js"></script> ...... <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> ...... <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', prevButton: '.swiper-button-prev', nextButton: '.swiper-button-next', initialSlide :1, paginationClickable: true, loop: true, autoplay:3000, autoplayDisableOnInteraction:false }); </script>
swiper使用引數:
1、initialSlide:初始索引值,從0開始
2、direction:滑動方向 horizontal | vertical
3、speed:滑動速度,單位ms
4、autoplay:設定自動播放及播放時間
5、autoplayDisableOnInteraction:使用者操作swipe後是否還自動播放,預設是true,不再自動播放
6、pagination:分頁圓點
7、paginationClickable:分頁圓點是否點選
8、prevButton:上一頁箭頭
9、nextButton:下一頁箭頭
10、loop:是否首尾銜接
11、onSlideChangeEnd:回撥函式,滑動結束時執行
swiper製作例項:
1、swiper製作移動端焦點圖例項
2、swiper製作整頁滾動效果