swiper轮播插件--动态修改属性值
需求:移动端只轮播一张图片,PC端轮播三张图片。使用直接修改swiper属性的方式需要手动刷新页面才能达到效果,
灰常恶心。。。。于是想到切换窗口时先销毁swiper再重新实例化swiper,,问题解决。。
let news_swiper = new Swiper('.news_swiper', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: false,
observer: true,
observeSlideChildren: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: true,
/* observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:false,//修改swiper的父元素时,自动初始化swiper
onSlideChangeEnd: function(swiper){
swiper.update();
news_swiper.startAutoplay();// 重新开始自动切换;
news_swiper.reLoop();
}*/
});
function newsSwiper_mobile() {
let $win = $(window).width();
if ($win > 768) {
news_swiper.destroy(true,true);
news_swiper = new Swiper('.news_swiper', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: false,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: true,
});
} else {
news_swiper.destroy(true,true);
news_swiper = new Swiper('.news_swiper', {
slidesPerView: 1,
spaceBetween: 30,
slidesPerGroup: 1,
loop: false,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: true,
});
}
}
注意:若不考虑页面刷新问题,则动态修改属性是:
news_swiper.params.slidesPerView = 3;
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/14312525.html