1 swiper介紹
開源、免費、強大的觸摸滑動插件
簡單配置即可實作手機、電腦網頁大部分滑動功能，焦點圖、tab、觸摸導航等
比如常見輪播圖就可以用這個實作
官網:https://www.swiper.com.cn/
swiper3地址：https://3.swiper.com.cn/
這里總結swiper3版本的簡單使用方法
2 使用
2.1 下載swiper
https://3.swiper.com.cn/download/index.html
2.2 使用
- 首先加載插件，需要用到的檔案有swiper.min.js和swiper.min.css檔案，
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="https://www.cnblogs.com/helf/p/path/to/swiper.min.css">
</head>
<body>
...
<script src="https://www.cnblogs.com/helf/p/path/to/swiper.min.js"></script>
</body>
</html>
- HTML內容，把
Slide 1到3換成img標簽即可實作輪播圖
<div >
<div >
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div ></div>
<!-- 如果需要導航按鈕 -->
<div ></div>
<div ></div>
<!-- 如果需要滾動條 -->
<!-- <div ></div>-->
</div>
導航等組件可以放在container之外
- 初始化Swiper：最好是挨著標簽(其實就是頁面加載完成后加載)
<script>
var mySwiper = new Swiper ('.swiper-container', {
//direction: 'vertical',默認是垂直方向
loop: true,//回圈滾動
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
//scrollbar: '.swiper-scrollbar',
})
</script>
注意：如果不想使用某個功能,需要將對應的html和js的內容都刪掉(注釋掉),否則可能會報錯.
比如：不想要滑動條這個功能需要將下面兩段代碼刪掉,注意要同時刪掉，
html
<div ></div>
js
scrollbar: '.swiper-scrollbar',
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/243191.html
標籤：Html/Css
上一篇：css筆記：rem布局