相信前端的小伙伴们对轮播图都不陌生,对于做轮播图,swiper框架是一个不错的选择.废话不多说上代码
首先要引入需要的swiper CDN 使用
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
问题1:触碰图片之后停止轮播
1.html页面
<div class="swiper-container" id="swiperContainer1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
2.正常的调用:现在这种情况下,图片可以自动轮播,但是当用手触碰之后就会停止轮播,所以要再添加一个参数
// 轮播图
var mySwiper = new Swiper('#swiperContainer1', {
pagination: '.swiper-pagination',
loop: true,
autoplay: 3000,//可选选项，自动滑动
});
3.解决调用: autoplayDisableOnInteraction : false (注意此参数，默认为true)
// 轮播图
var mySwiper = new Swiper('#swiperContainer1', {
pagination: '.swiper-pagination',
loop: true,
autoplay: 3000,//可选选项，自动滑动
autoplayDisableOnInteraction : false
});
现在无论怎么左右滑,轮播事件都不会停止了
问题2:Swiper 通过ajax加载图片轮播后,导航点失效
1.html页面
<div class="swiper-container" id="swiperContainer1">
<div class="swiper-wrapper">
<!--<div class="swiper-slide">
<img src="http://img06.tooopen.com/images/20160818/
tooopen_sy_175866434296.jpg" alt="">
</div> -->
</div>
<div class="swiper-pagination"></div>
</div>
2.js解决(通过ajax)
描述:有时候轮播图的图片是通过发ajax向后台获取的,这时候你就会发现各种问题,比如轮播图不动,无法滑动,下面的指示小圆点变得混乱了等等。其实这些都是swiper的渲染问题,因为简单的swiper页面是静态的,资源数稳定的.当产生变化时,swiper需要重新渲染才行,不然就会出现问题,最简单的办法就是在ajax成功接收后台数据时我们开始渲染调用swiper函数
$.ajax({
url: 'https//xxx.com/banner.php',//到时候改成你们自己的url
data: {},
type: 'post',
success: function (res) {
for (var i in res.packageInfo.pic_list){
pic_list += '<div class="swiper-slide">' +
'<img src="' + packageInfo.pic_list[i].pic_url + '" alt="">'+
'</div>';
}
$('.swiper-container .swiper-wrapper').html(pic_list);
// 轮播图
var mySwiper = new Swiper('#swiperContainer1', {
pagination: '.swiper-pagination',
loop: true,
autoplay: 3000,//可选选项，自动滑动
autoplayDisableOnInteraction : false ,
});
},
error: function () {
console.log('网络异常，请重试');
}
问题3:当改变swiper的样式(例如隐藏/显示)或者修改swiper元素时,自动初始化swiper
1.html页面
<div class="swiper-container" id="swiperContainer1">
<div class="swiper-wrapper">
<div class="swiper-slide1">
<img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<button class="btn">隐藏</button>
2.js事件
//隐藏
$('.btn1').click(function(){
$(".swiper-wrapper").hide();
});
//删除
$('.swiper-wrapper .swiper-slide1').click(function(){
$(this).remove();
})
3.改变swiper后初始化调用
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,//默认为false,当子元素发生变化的时候
observeParents:true,//默认为false,当父元素发生变化的时候
})
以上纯粹用来笔记,如有错误之处还望留言指点~
如需想要了解更多可登录Swiper中文文档地址:
https://www.swiper.com.cn/cdn/index.html
