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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」