我们如何使用带有数据属性的 swiper 滑块从属性值访问它的功能

问题描述

我正在尝试借助数据属性来创建响应式滑动条滑块以访问滑动条滑块功能。 这是我的 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 的新手。 纠正我的代码或用正确的解决方案指导我对我来说会很棒。 谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）