动态设置原生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 小时前
VSCode V1.107 发布(2025 年 11 月)
前端·visual studio code
一只小阿乐21 小时前
前端vue3 web端中实现拖拽功能实现列表排序
前端·vue.js·elementui·vue3·前端拖拽
AAA阿giao21 小时前
从“操纵绳子“到“指挥木偶“:Vue3 Composition API 如何彻底改变前端开发范式
开发语言·前端·javascript·vue.js·前端框架·vue3·compositionapi
TextIn智能文档云平台21 小时前
图片转文字后怎么输入大模型处理
前端·人工智能·python
专注前端30年21 小时前
在日常开发项目中Vue与React应该如何选择?
前端·vue.js·react.js
文刀竹肃21 小时前
DVWA -XSS(DOM)-通关教程-完结
前端·安全·网络安全·xss
lifejump1 天前
Pikachu | XSS
前端·xss
进击的野人1 天前
Vue 组件与原型链:VueComponent 与 Vue 的关系解析
前端·vue.js·面试
馬致远1 天前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭1 天前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css