动态设置原生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,
		},
	});
});
相关推荐
一锤捌拾21 小时前
V8引擎精品漫游指南--Ignition篇(下 一) 动态执行前的事情
前端·javascript
遇见~未来21 小时前
第六篇_CSS进阶_深入浏览器与工程化
前端·css·rust
Cache技术分享21 小时前
397. Java 文件操作基础 - 创建常规文件与临时文件
前端·后端
Daybreak21 小时前
Vercel Serverless 调国内 AI 接口 504?Edge Runtime 救了我
前端
zubylon21 小时前
Ollama 本地起一个开发助手
前端·人工智能
遇见~未来21 小时前
第五篇_构建真实页面_组件_响应式_维护性
前端·css3
魔士于安21 小时前
Unity完整小球迷宫项目
前端·unity·游戏引擎·贴图·模型
irpywp21 小时前
苦于AI生成的网页千篇一律且粗糙?design-md-chrome :一款网页样式提取插件 ,将任意网站的视觉规范转化为大模型可读的代码指令!
前端·人工智能·chrome·开源·github
xingpanvip21 小时前
星盘接口开发文档:日运语料接口指南
android·开发语言·前端·css·php·lua
网络点点滴21 小时前
Node.js理论-Web的基本运作原理
前端·node.js