动态设置原生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,
		},
	});
});
相关推荐
袅沫8 小时前
Nginx中部署多个前端项目——区分路径
服务器·前端
Asize8 小时前
为什么写代码前要先规划组件树?Next.js + Redis 笔记系统实战
前端·javascript·next.js
用户921080262868 小时前
6. 数据大屏 WebSocket 稳定性优化:心跳检测、断点续传和消息去重
前端
柚yuzumi8 小时前
CSS 定位布局:让元素各就各位
前端·css
光影少年8 小时前
react navite图片加载优化、大图卡顿、缓存策略
前端·react native·react.js
小林ixn8 小时前
用 Next.js 和 Redis 撸一个 Markdown 笔记系统:RSC 实战与组件化拆解
前端·redis·next.js
渣波8 小时前
重构旅行体验:基于 React 的 AI 旅游助手对话系统实战解析
前端·javascript
今日无bug8 小时前
列表转树:一道题搞懂 HashMap 在算法里的价值
前端·数据结构
用户921080262868 小时前
5. 数据大屏实时通信第一步:为什么选择 WebSocket,以及如何接入 Socket.IO
前端
岁月留痕1688 小时前
17 实战项目二:实现“日记”项目多页面管理
前端