javascript - 同一页面上的多个 Swiper.js 实例

Question

我试图在同一页面上有多个 Swiper 实例。

但不必像这样定义每个实例：

<div class="swiper-container s1"></div>
<div class="swiper-container s2"></div>
<div class="swiper-container s3"></div>
<script>
var swiper1 = new Swiper('.s1', { /* Options here */ })
var swiper2 = new Swiper('.s2', { /* Options here */ })
var swiper3 = new Swiper('.s3', { /* Options here */ })
</script>

我希望能够data-swiper像这样在里面传递 conf：

<div class="swiper-container" data-swiper="{ direction: 'vertical', loop: true, pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar' }">

到目前为止，我的代码是：

function swipr() {
    let swpr = '.swiper-container';

    document.querySelectorAll(swpr).forEach(el => { 
        let conf = el.getAttribute('data-swiper');
        // Initialization
        const swiper = new Swiper(swpr, conf);
        
    });
}

document.addEventListener("DOMContentLoaded", () => { swipr() });

但它没有按预期工作......

这是一个 JsFiddle

标签： javascriptswiperswiperjsswiper.js