jQuery 加载后初始化滑块

Question

我在项目中使用 jQuery 滑块 (Swiper)。如果我加载页面，初始化滑块工作正常，但是当从 html 文件加载新内容（带滑块）时，滑块不会初始化。当前步数：

正在创建一个新部分：

var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);

正在将 html 文件中的内容加载到新部分

section.load(newSection+'.html .cd-section > *', function(event){...});

我正在尝试在此加载事件后进行初始化，但这不起作用。

section.load(newSection+'.html .cd-section > *', function(event){

    if(typeof Swiper == "undefined") {
        console.log("Ready to rumble");
        $.getScript('js/swiper.jquery.min.js', function() {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationType: 'progress',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 30,
                grabCursor: true,
            });
        });
    }
});

如何让滑块在加载事件后初始化？

Answer 1

我使用以下方法解决了这个问题：

索引页头部需要有swiper样式。
加载事件后调用slidername.update(true)，更新 DOM 操作后的滑块。

有关更新功能的进一步参考，请参阅 http://www.idangero.us/swiper/api。

jQuery 加载后初始化滑块

Initialise slider after jQuery load

javascript

jquery

html

swiper