Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。超好用
話不多說，直接上教程
1、首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下載Swiper文件或使用CDN。
|
1
2
3
|
<!-- Link Swiper--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="external nofollow" > <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script> |
請勿直接引入Swiper中文網(wǎng)的文件
|
1
2
3
|
x <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>x <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="external nofollow" /> |
2、CSS樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<style> .swiper-container { //你可以在這里設(shè)置寬高 width: 50%; height: 50%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } img{ width:250px; } </style> |
3、HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/000.jpg" alt=""></div> <div class="swiper-slide"><img src="img/001.jpg" alt=""></div> <div class="swiper-slide"><img src="img/002.jpg" alt=""></div> <div class="swiper-slide"><img src="img/003.jpg" alt=""></div> <div class="swiper-slide"><img src="img/004.jpg" alt=""></div> //添加圖片 </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div></div> |
4、javaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script> var swiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });</script> |
效果圖
你只需要替換一下圖片，和修改一下圖片及輪播圖的大小就可以輕輕松松寫出一個很棒的輪播圖，怎么樣是不是很簡單
補充：怎么用swiper實現(xiàn)勻速無縫輪播
1.設(shè)置屬性
|
1
2
3
4
5
6
7
|
freeMode:true,autoplay: {delay:0} |
2.然后再修改或者覆蓋樣式
|
1
2
3
4
5
6
7
8
|
.swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: linear; /*之前是ease-out*/ -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; margin: 0 auto;} |
補充2：移動端swiper.js中的坑
步驟：
1，渲染日歷：日歷是自己開發(fā)的（注意幾點：1，獲得當(dāng)前日期；2，一個月多少天；3，閏月情況；4，每個月1號是禮拜幾；。。。）
2，因項目比較近，所以采用了swiper.js控件來做滑動效果；
問題：
1，首先遇到的是在ios上測試是沒有問題的，包括UC，百度等瀏覽器；不過在魅族，華為手機上測試出現(xiàn)問題了-----不能來回切換；
解決方法：考慮到應(yīng)該是兼容性問題，于是乎查找swiper.js官方文檔，因為當(dāng)時只是引用了swiper.js，而沒有引入swiper.css和swiper.animate.js；
重新引入后，ok了，問題得到解決；
|
1
2
3
|
<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" /><script src="../../scripts/common/swiper-3.3.1.min.js"></script><script src="../../scripts/common/swiper.animate.min.js"></script> |
2，引入需要的文件后，發(fā)現(xiàn)ios和安卓瀏覽器是沒有問題的，但是，安卓app里又出現(xiàn)問題了，來回切換不流暢，此時自己也是百度了一下，沒有找到解決方法
最后還得看官方文檔，查看屬性和方法
解決方案：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 輪播圖--左右滑動和切換 var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', loop:false, mode: 'horizontal', freeMode:false, touchRatio:0.5, longSwipesRatio:0.1, threshold:50, followFinger:false, observer: true,//修改swiper自己或子元素時，自動初始化swiper observeParents: true,//修改swiper的父元素時，自動初始化swiper onSlideChangeEnd:function(swiper){ // 當(dāng)滑動結(jié)束后---月份日期切換同步左右左右切換 changeMonth(); } }); |
注意：初始化的時候添加的這幾個屬性，有不明白的可以查看官方文檔；
溫馨提示：swper.js我用的3xxx版本以上的，各個版本差別還是挺大的！
到此這篇關(guān)于Swiper.js插件超簡單實現(xiàn)輪播圖的文章就介紹到這了,更多相關(guān)Swiper.js 輪播圖內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_43316655/article/details/89526687
