动态设置原生swiper的配置项

动态改变已经渲染出来的swiper

语法:

javascript 复制代码
swiper的实例.params

例:

javascript 复制代码
let cl_w = document.documentElement.clientWidth || document.body.clientWidth;
let myswiper = null;
window.addEventListener("resize",() => {
    return (() => {
        cl_w = document.documentElement.clientWidth || document.body.clientWidth;
		myswiper.params.slidesPerView = cl_w > 750 ? 1.55  : 1.1;
		myswiper.params.spaceBetween = cl_w > 750 ? 20  : 10;
    })()
});
$(document).ready(()=>{
	myswiper = new Swiper('.h_right_img', {
		slidesPerView: cl_w > 750 ? 1.55  : 1.1,
		spaceBetween:  cl_w > 750 ? 20  : 10,
        freeMode: true,
		loop:true,
		centeredSlides: true,
		navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
        },
		pagination: {
		   el: '.swiper-pagination',
		   dynamicBullets: true,
		   clickable: true,
		},
	});
});
相关推荐
平凡的阿泽2 分钟前
我用 Trae 实现了AI辩论赛
前端
对空六课7 分钟前
指标口径生效时间的版本查询实现
大数据·服务器·前端·算法·数据分析
对空六课11 分钟前
RFM分层边界变化的回溯计算
大数据·服务器·前端·数据库·人工智能·算法·数据分析
IT_陈寒16 分钟前
Vite打包的诡异行为,让我差点提交了个错误版本
前端·人工智能·后端
鹏多多17 分钟前
前端是如何死去的?| 完整时间线
前端·javascript·程序员
coding漫漫长路23 分钟前
海报挪进Worker画,canvas字体又变回默认了
前端
看浪的路人26 分钟前
第2讲:ReAct 模式从零实现——不用框架,手写一个 Agent 内核
前端·react.js·前端框架
独孤九剑打醒他32 分钟前
【原创开源·航空终极篇】氢能航空动力升级:双燃料掺氢、富氧补气与露天储氢安全模型
前端·架构·开源·硬件工程·能源
律宏阔35 分钟前
阿里云 ESA + Pages 域名部分电脑无法访问
前端
Lank_M40 分钟前
canvas 第一次画字没用上字体,字体却是它要来的
前端