我们如何使用具有数据属性的滑动滑块来从属性值访问其功能

问题描述 投票:0回答:2

我正在尝试借助数据属性创建响应式滑动滑块来访问滑动滑块功能。 这是我的 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 的新手。 如果我能更正我的代码或指导我找到正确的解决方案,那就太棒了。 谢谢你

javascript html jquery custom-data-attribute swiper.js
2个回答
1
投票

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);

这种方法有一些缺点:

  1. 您需要一个额外的抽象来将多个数据属性组装到最终的 swiper.js 兼容选项对象中。
  2. 当使用的库基于本机java脚本对象时,通过Jquery解析数据属性没有真正的好处。

原生 Js 方法

由于 swiper.js 不基于/依赖于 Jquery,你应该考虑“vanilla JS”方法。

按照 Roman Koff 的建议 – 看看 pavelblednov 的 github 要点

但是,我们可以通过创建更通用和通用的初始化辅助函数来进一步简化/完善这种方法。

将所有选项定义为 JSON 字符串

您可以将选项对象转换为 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 字符串

更复杂的选项可能会稍微容易出错(例如缺少引号或大括号)。

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));

JS 示例:使用通用初始化函数

// 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>

如何运作

  1. 使用指定选择器循环所有元素 - 默认“.swiper”

  2. 检索数据属性并解析它

    JSON.parse(swiper.dataset.swiper)

  3. 我们可能希望指定应用于所有实例的默认选项,并将它们与各个数据选项合并。我们可以通过扩展运算符合并两个对象

    让选项= { ...默认值, ...选项数据 };

数据属性中指定的参数将覆盖默认值

测试:请参阅

codepen 示例。


0
投票
最简单的方法是 eval() 函数。

可能存在一些安全问题。轻轻使用。

<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);
    }
});
    
© www.soinside.com 2019 - 2024. All rights reserved.