动态设置原生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,
		},
	});
});
相关推荐
郑州光合科技余经理28 分钟前
国际版外卖系统:税率字段怎么和订单主流程解耦
android·java·开发语言·前端·后端·php·ai编程
梦想平凡1 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
yume_sibai2 小时前
06-Rust Web 开发实战(Axum 框架 + 数据库 + JWT 认证 + 中间件 + 部署)
前端·数据库·rust
计算机魔术师3 小时前
特朗普上台打给黄仁勋:AI末日论是骗局,我们绝不让它发生
前端
troy1284 小时前
Python 基础语法(八):Web 后端开发、数据分析与可视化、网络爬虫、人工智能 / 大模型应用
前端·python·数据分析
计算机魔术师4 小时前
CEO说要慢下来,黑客说别做梦了——同一篇论文,两种命运
前端
kyriewen4 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
IT_陈寒5 小时前
Java里用Stream.parallel()翻车实录,这性能还不如单线程
前端·人工智能·后端
wangchunyu1145 小时前
JavaScript 零基础入门教程
前端
hanchenxing6 小时前
前端异步任务三方案:Celery vs Redis Stream vs BullMQ 实战对比消息队列
前端·数据库·redis·异步任务·方案对比