我正在尝试借助数据属性创建响应式滑动滑块来访问滑动滑块功能。 这是我的 HTML 代码:
<div class="swiper-container " data-slidespace="30" data-smView="1" data-mdView="2"
data-lgView="3" data-xlView="4">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
<div class="swiper-container " data-slidespace="15" data-smView="1" data-mdView="2"
data-lgView="2" data-xlView="3">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
下面是我的JS代码:
$(".swiper-container").each(function() {
var web_slider = $(this);
web_slider.Swiper({
spaceBetween: web_slider.data("slidespace"),
breakpoints: {
320: {
slidesPerView: web_slider.data("smView"),
},
768: {
slidesPerView: web_slider.data("mdView"),
},
1024: {
slidesPerView: web_slider.data("lgView"),
},
1190: {
slidesPerView: web_slider.data("xlView"),
}
},
});
});
我遇到的错误 :: web_slider.Swiper 不是函数 在 HTMLDivElement.. 我是 javascript 和 Jquery 的新手。 如果我能更正我的代码或指导我找到正确的解决方案,那就太棒了。 谢谢你
正如 Rory McCrossan 所评论的,在初始化 swiper 时,你不能混合使用 jquery 和原生 JS 对象/节点。
这是 jquery 脚本的修改版本:
$(function () {
$(".swiper-container").each(function () {
// convert jquery object to native node
let web_slider = $(this)[0];
let optionsData = web_slider.dataset;
// set options for swiper
let options = {
spaceBetween: optionsData.slidespace,
breakpoints: {
320: {
slidesPerView: optionsData.smview
},
768: {
slidesPerView: optionsData.mdview
}
}
};
// init
new Swiper(web_slider, options);
});
});
body {
background: #eee;
font-family: sans-serif;
}
.swiper {
width: 100%;
height: 100%;
margin: 1em 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>
<div class="swiper swiper-container " data-slidespace="30" data-smView="2" data-mdView="3" data-lgView="4" data-xlView="4">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
<div class="swiper swiper-container " data-slidespace="15" data-smView="1" data-mdView="2" data-lgView="2" data-xlView="3">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
基本上,我们只是将 Jquery 对象转换为本地 JS 等价物,如下所示:
let web_slider = $(this)[0];
然后通过检索数据属性来填充 swiper.js 选项对象
// set options for swiper
let options = {
spaceBetween: optionsData.slidespace,
breakpoints: {
320: {
slidesPerView: optionsData.smview
},
768: {
slidesPerView: optionsData.mdview
}
}
};
// init
new Swiper(web_slider, options);
由于 swiper.js 不基于/依赖于 Jquery,你应该考虑“vanilla JS”方法。
按照 Roman Koff 的建议 – 看看 pavelblednov 的 github 要点。
但是,我们可以通过创建更通用和通用的初始化辅助函数来进一步简化/完善这种方法。
您可以将选项对象转换为 JSOn 字符串,而不是添加多个数据属性:
let options = {
spaceBetween: 5,
slidesPerView: 2
}
成为
{"spaceBetween":5, "slidesPerView":2}
显然这个对象或 JSON 字符串必须遵守当前的 API 选项/参数。
我们需要小心所附的引号。您可以将数据属性值括在 单引号 中,并将对象键括在双引号中,如下所示:
<div class="swiper" data-swiper='{"spaceBetween":5, "slidesPerView":2}'>
这是许多其他滑块使用的常见做法,例如 splide.js(vanilla js)slick slider(jquery)支持开箱即用的数据属性设置。
更复杂的选项可能会稍微容易出错(例如缺少引号或大括号)。
JSON.stringify()
可以帮助获取正确的JSON字符串:
let options = {
spaceBetween: 12,
slidesPerView: 3,
pagination: { el: ".swiper-pagination" },
autoplay: { delay: "1000" },
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
};
console.log(JSON.stringify(options));
// basic options for all sliders
let defaults = {
spaceBetween: 5,
slidesPerView: 2
}
// call init function
initSwipers(defaults);
function initSwipers(defaults={}, selector='.swiper'){
let swipers = document.querySelectorAll(selector)
swipers.forEach(swiper=>{
// get options
let optionsData = swiper.dataset.swiper ? JSON.parse(swiper.dataset.swiper) : {};
// combine defaults and custom options
let options = {
...defaults,
...optionsData
};
// init
new Swiper(swiper, options);
})
}
body {
background: #eee;
font-family: sans-serif;
}
.swiper {
width: 100%;
height: 100%;
margin: 1em 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>
<div class="swiper" data-swiper='{"spaceBetween":12,"slidesPerView":3,"pagination":{"el":".swiper-pagination"},"autoplay":{"delay":"1000"},"breakpoints":{"320":{"slidesPerView":2,"spaceBetween":20},"480":{"slidesPerView":3,"spaceBetween":30},"640":{"slidesPerView":4,"spaceBetween":40}}}'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper" data-swiper='{"slidesPerView":4}'>
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
<h3>No data attribute - use defaults</h3>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
使用指定选择器循环所有元素 - 默认“.swiper”
检索数据属性并解析它
JSON.parse(swiper.dataset.swiper)
我们可能希望指定应用于所有实例的默认选项,并将它们与各个数据选项合并。我们可以通过扩展运算符合并两个对象
让选项= { ...默认值, ...选项数据 };
数据属性中指定的参数将覆盖默认值。
测试:请参阅可能存在一些安全问题。轻轻使用。
<div class="swiper" data-swiper="{
loop: true,
lazy: true,
autoHeight: true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
},
}">
$('[data-swiper]').each(function() {
try {
let options = $(this).attr('data-swiper');
eval('options=' + options);
if (typeof options == 'object') {
new Swiper(this, options);
}
} catch(err) {
console.error('Check swiper options', err);
}
});