如何實現swiper自動圖片無限輪播
- php中世界最好的语言原創
- 2018-05-28 14:13:266532瀏覽
這次帶給大家如何實現swiper自動圖片無限輪播，實現swiper自動圖片無限輪播的注意事項有哪些，下面就是實戰案例，一起來看一下。
完整程式碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="swiper/css/swiper-3.4.2.min.css" rel="external nofollow" >
<script src="swiper/js/swiper-3.4.2.min.js"></script>
<style type="text/css">
.swiper-container {
width: 900px;
height: 300px;
}
</style>
</head>
<body>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide box1"><img src="img/a.jpg"></p>
<p class="swiper-slide box2" ><img src="img/b.jpg"></p>
<p class="swiper-slide box3"><img src="img/c.jpg"></p>
</p>
<!-- 如果需要分页器 -->
<p class="swiper-pagination"></p>
<!-- 如果需要导航按钮 -->
<p class="swiper-button-prev"></p>
<p class="swiper-button-next"></p>
<!-- 如果需要滚动条 -->
<!--<p class="swiper-scrollbar"></p>-->
</p>
</p>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
autoplay : 1000,
speed:100,
// 如果需要滚动条
// scrollbar: '.swiper-scrollbar',
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
}
})
</script>
</body>
</html>
如何使用swiper寫輪播
之前大家都寫過輪播圖吧，相信在寫輪播圖的過程中也因為當中的某些細節煩惱過吧，接下來我要跟大家講述一個方便快速的輪播圖吧！
Swiper常用於行動網站的內容觸控滑動
1.第一步先引入css---swiper.css外掛程式和JQ---swiper.js 外掛程式,
然後呢就開始寫輪播圖了
<p class="swiper-container">--首先定义一个容器 <p class="swiper-wrapper"> <p class="swiper-slide"><img src="" /></p> --添加图片 <p class="swiper-slide"><img src="" /></p> <p class="swiper-slide"><img src="" /></p> </p> <p class="swiper-pagination"></p>--小圆点分页器 <p class="swiper-button-prev"></p>--上一页 <p class="swiper-button-next"></p>--下一页 </p>
如果想讓它動起來，那就繼續來寫js吧
var mySwiper = new Swiper(".swiper-container",{
autoplay:1000,--每秒中轮播一次
loop:true,--可以让图片循环轮播
autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
pagination:".swiper-pagination",--让小圆点显示
paginationClickable:true,--实现小圆点点击
prevButton:".swiper-button-prev",--实现上一页的点击
nextButton:".swiper-button-next",--实现下一页的点击
effect:"flip"--可以实现3D效果的轮播
})
Swiper輪播的也有它的好處：
1.Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等行動終端。
2.Swiper能實現觸控焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常用效果。
3.Swiper開源、免費、穩定、使用簡單、功能強大，是架構行動終端網站的重要選擇！
同時也有不足之處：(使用Swiper輪播插件ajax請求載入圖片時，無法滑動的問題)
因為banner圖是動態創建的，在插件開始初始化時，文檔流中沒用圖片，所以沒有建立對應寬度，透過調整js載入順序，問題還是沒有解決。
最後找到swiper外掛 api 有屬性是可以依內容變動，自動初始化外掛程式的，加入observer：true後問題解決！
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
Swiper擁有豐富的API介面。 （不過關於中文文件不多，沒找。）能讓開發者產生個人獨有的分頁器（pagination），上下滑區塊的按鈕
以及4個回呼函數 ：1.onTouchStart
2.onTouchMove
3.onTouchEnd## 3.onTouchEnd## 4
以上內容是我個人總結，希望對各位有幫助！
swiper輪播圖（逆向自動切換類似於無限迴圈）
swiper外掛程式輪播圖，預設的輪播循序是會從右向左，第一張，第二張，第三張，然後肉眼可見是的從第三張從左到右倒回第一張，這樣就會有些視覺體驗不高，#，不過還是能夠用swiper本身的特性改變成無限循環的輪播的。 HTML程式碼<p class="course-banner-box"> <p class="swiper-container"> <p class="swiper-wrapper"> <!--四张轮播图--> <p class="swiper-slide slide1"></p> <p class="swiper-slide slide2"></p> <p class="swiper-slide slide3"></p> <p class="swiper-slide slide4"></p> </p> <!-- Add Pagination --> <p class="swiper-pagination"></p> <!-- Add Arrows --> <p class="button-box"> <p class="button"> <!--左右按钮--> <p class="swiper-button-next"></p> <p class="swiper-button-prev"></p> </p> </p> </p> </p>script程式碼
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//pagination分页器
nextButton: '.swiper-button-next',//前进后退按钮
prevButton: '.swiper-button-prev',
paginationClickable: true,//参数设置为true时，点击分页器的指示点分页器会控制Swiper切换
spaceBetween: 30,//slide之间的距离（单位px）。
centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
loop : true,//复制多份循环(这里就是让轮播看起来是循环的，去掉这个就恢复了默认的swiper轮播)
autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
autoplayDisableOnInteraction: false//点击后打断auto-play
});
</script>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀：
################################################################# ###以上是如何實現swiper自動圖片無限輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn