javascript - swiper.js 滑块不适用于动态内容

Question

var menu1 = ['Appetizers', 'Soup & Salad', 'Burger & Sandwiches', 'Entrée Platters', 'Entrée Steaks', 'Sides', 'Beverages', 'Desserts']
var gridslide1 = new Swiper ('.grid-slide1', {
    // If we need pagination

    pagination: {
      el: '.swiper-pagination',
            clickable: true,
        renderBullet: function (index, className) {
          console.log(index,className);
          return '<span class="' + className + '">' + (menu1[index]) + '</span>';
        },
    },

    slidesPerView: 1,
    speed: 1000,
    paginationClickable: true,
});

上面的代码产生了正确的结果，控制台显示它遍历了数组的所有索引，结果显示在第一张图中。

我有动态内容，并且我正在以一种在数组准备好时应该初始化 swiper 的方式设置数据。

var menu_dyn = [];

$('.ulgrain').each(function() {
    var localRels = [];

    $(this).find('li').each(function(){
        localRels.push( $(this).text() );
    });

    menu_dyn.push(localRels);
});

console.log("+=================================")

console.log(menu_dyn)

console.log("+=================================")

if(menu_dyn) {
    var dum = 1;
    var thisSwiper = [];
    for (var i = 0; i < menu_dyn.length; i++) {

        var gmenu = [];
        for(var x = 0; x < menu_dyn[i].length; x++) {
            gmenu.push(menu_dyn[i][x])
        }


        thisSwiper[i] = new Swiper ('.grid-slide'+dum, {

            pagination: {
              el: '.swiper-pagination',
                    clickable: true,
                renderBullet: function (index, className) {
                    console.log(index, className)
                    console.log(gmenu)
                  return '<span class="' + className + '">' + (gmenu[index]) + '</span>';
                },
            },

            slidesPerView: 1,
            speed: 1000,
            paginationClickable: true,
        });


        dum++;
    }
    
    console.log(thisSwiper)
}

但它不能正常工作，只取数组的第一个索引

不知道第二段代码出了什么问题

标签： javascriptjqueryswiperswiper.js