Jquery 弹出窗口内的滑块不起作用

Question

我正在尝试在弹出框中编写一个滑块。

我正在使用 Jquery。弹出窗口有效，它会按我想要的方式弹出。

对于滑块，我使用 Swiper jquery 库。

如果我自己测试弹出窗口中的代码 div 滑块效果很好，但那里肯定有一些碰撞。

这就是我刚才描述的link。

这是弹出代码：

$(document).ready(function() {
    $(window).load(function() {
        $("div#slidex").append('<div class="pup disable"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/1.jpg" alt="pro group 1"></div><div class="swiper-slide"><img src="images/2.jpg" alt="pro group 2"></div><div class="swiper-slide"><img src="images/3.jpg" alt="pro group 3"></div><div class="swiper-slide"><img src="images/4.jpg" alt="pro group 4"></div></div> <div class="swiper-pagination"></div></div><img id="x" src="http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp7/inline/basic-icon-x.png"> </div>');

        setTimeout(function() {
            $("div.pup").fadeIn(200).addClass("active");
        }, 3000);

        $('#x').on('click', function() {
            $("div.pup").fadeOut(300).addClass("disable");
        });
    });
});

我在控制台没有收到任何错误。

我一定是漏掉了什么……

Answer 1

问题是您在尚未加载目标元素时尝试初始化滑动条。此外，当您在超时内显示 div.pup 时，您应该在那里初始化滑动器。

您可以改进的另一件事是您不需要等待分别加载 DOM 和内容。在这种情况下，只需等待 DOM 就足够了。

您的代码应如下所示 (jsFiddle):

$(function(){
    $("div#slidex").append('<div class="pup disable"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="http://seveloff.com/test/images/1.jpg" alt="pro group 1"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/2.jpg" alt="pro group 2"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/3.jpg" alt="pro group 3"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/4.jpg" alt="pro group 4"></div></div> <div class="swiper-pagination"></div></div><img id="x" src="http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp7/inline/basic-icon-x.png"> </div>');

    setTimeout(function() {
        $("div.pup").fadeIn(200).addClass("active");
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            effect: 'fade'
        });
    }, 3000);

    $('#x').on('click', function() {
        $("div.pup").fadeOut(300).addClass("disable");
    });
});

Jquery 弹出窗口内的滑块不起作用

Jquery slider inside popup dosen't work

jquery

popup

swiper