2021-05-12 14:32:11
Swiper.js外掛超簡單實現輪播圖
2021-03-24 13:01:06
Swiper是純javascript打造的滑動特效外掛，面向手機、平板電腦等行動終端。能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。超好用
話不多說，直接上教學
1、首先載入外掛，需要用到的檔案有swiper.min.js和swiper.min.css檔案。可下載Swiper檔案或使用CDN。
<!-- 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中文網的檔案
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樣式
<style>
.swiper-container {
//你可以在這裡設定寬高
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
<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
<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實現勻速無縫輪播
1.設定屬性
freeMode:true,
autoplay: {
delay:0
}
2.然後再修改或者覆蓋樣式
.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，渲染日曆：日曆是自己開發的（注意幾點：1，獲得當前日期；2，一個月多少天；3，閏月情況；4，每個月1號是禮拜幾；。。。）
2，因專案比較近，所以採用了swiper.js控制元件來做滑動效果；
問題：
1，首先遇到的是在ios上測試是沒有問題的，包括UC，百度等瀏覽器；不過在魅族，華為手機上測試出現問題了-----不能來回切換；
解決方法：考慮到應該是相容性問題，於是乎查詢swiper.js官方檔案，因為當時只是參照了swiper.js，而沒有引入swiper.css和swiper.animate.js；
重新引入後，ok了，問題得到解決；
<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，引入需要的檔案後，發現ios和安卓瀏覽器是沒有問題的，但是，安卓app裡又出現問題了，來回切換不流暢，此時自己也是百度了一下，沒有找到解決方法
最後還得看官方檔案，檢視屬性和方法
解決方案：
// 輪播圖--左右滑動和切換
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){ // 當滑動結束後---月份日期切換同步左右左右切換
changeMonth();
}
});
注意：初始化的時候新增的這幾個屬性，有不明白的可以檢視官方檔案；
溫馨提示：swper.js我用的3xxx版本以上的，各個版本差別還是挺大的！
到此這篇關於Swiper.js外掛超簡單實現輪播圖的文章就介紹到這了,更多相關Swiper.js 輪播圖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！
相關文章