js(Dom+Bom)第八天—Swiper(插件)
生活随笔
收集整理的這篇文章主要介紹了
js(Dom+Bom)第八天—Swiper(插件)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Swiper插件(庫)
01-基本介紹
Swiper 是一款免費以及輕量級的移動設備觸控滑塊的js框架，使用硬件加速過渡（如果該設備支持的話）。主要使用于移動端的網站、移動web apps，native apps和hybrid apps。主要是為IOS而設計的，同時，在Android、WP8系統也有著良好的用戶體驗，Swiper從3.0開始不再全面支持PC端。因此，如需在PC上兼容更多的瀏覽器，可以選擇Swiper2.x（甚至支持IE7）。https://www.swiper.com.cn/02-基本使用
下載
網頁中引用swiper.min.js和swiper.min.css文件
js文件和css文件都在 package 文件夾中設置基本的html結構
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/swiper.min.css"> </head> <body><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><!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。--><div class="swiper-button-prev"></div><!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。--><div class="swiper-button-next"></div></div><script type="text/javascript" src="js/swiper.min.js"></script> </body> </html>初始化插件
<script> var mySwiper = new Swiper('.swiper-container', {autoplay: true,//可選選項，自動滑動}) </script>基本配置
direction : 'vertical' 豎向滾動 'horizontal' 橫向滾動 speed: 300ms loop : true 循環播放 false 不循環 autoplay: true 自動播放 false 不播放//分頁器 //需要在html中添加對應的標簽 pagination: {el: '.swiper-pagination', }, //上一頁,下一頁 //需要在html中添加對應的標簽 navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev', }更多操作可以查看API手冊
總結
以上是生活随笔為你收集整理的js(Dom+Bom)第八天—Swiper(插件)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 放大镜制作（2）—此方法比较容易理解
- 下一篇： js(Dom+Bom)第八天