Swiper触碰图片切换之后停止轮播|Swiper触碰图片切换之后停止轮播,通过ajax添加图片,修改swiper样式后初始化swiper
相信前端的小伙伴们对轮播图都不陌生,对于做轮播图,swiper框架是一个不错的选择.废话不多说上代码首先要引入需要的swiper CDN 使用
问题1:触碰图片之后停止轮播
1.html页面
文章图片
文章图片
文章图片
文章图片
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页面
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 += '' +
'
文章图片
'+
'';
}
$('.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页面
文章图片
文章图片
文章图片
文章图片
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触碰图片切换之后停止轮播|Swiper触碰图片切换之后停止轮播,通过ajax添加图片,修改swiper样式后初始化swiper】以上纯粹用来笔记,如有错误之处还望留言指点~
如需想要了解更多可登录Swiper中文文档地址:
https://www.swiper.com.cn/cdn/index.html
