Question

我想在bx滑块中动态加载图像，效果很好，我可以预加载下一张和上一张图像，但是我遇到onSliderLoad事件的麻烦，当我调用模态滑块时要加载第一张图像窗口。我有一个内部未定义的对象...

感谢您的帮助。

$(".showmod").on('click', function(e) {
    e.preventDefault();
    var content = $("#modal-container").find('.content');
    var url = $(this).attr('data-ref');

    $.get(url, function(data) {
        content.html(data);
        ajaxImageLoad();
    }, "html");
    $("body").css("overflow", "hidden");
    $(".modal-container").addClass('visible');
    setTimeout(animation_entree, 500);
    $(".modal-container").css("overflow", "auto");
});

function ajaxImageLoad(imagenum = 0) {
    $('.slider').bxSlider({
        adaptiveHeight: true,
        keyboardEnabled: true,
        pagerType: 'short',
        startSlide: imagenum,
        useCSS: false,
        onSlideNext: function(newIndex) {
            $('.active-slide').removeClass('active-slide');
            $('.go').removeClass('go');
            var $nextSlide = newIndex.next().find('.lazy');
            newIndex.find('.comment').addClass('active-slide');
            newIndex.find('.animate').addClass('go');
            var $lazy = newIndex.find(".lazy");
            var $load = $lazy.attr("data-src");
            var $nextload = $nextSlide.attr("data-src");

            $lazy.attr("src", $load).removeClass("lazy");
            $nextSlide.attr("src", $nextload).removeClass("lazy");
        },
        onSlidePrev: function(newIndex) {
            $('.active-slide').removeClass('active-slide');
            $('.go').removeClass('go');
            var $previousSlide = newIndex.prev().find('.lazy');

            newIndex.find('.comment').addClass('active-slide');
            newIndex.find('.animate').addClass('go');

            var $lazy = newIndex.find(".lazy");
            var $load = $lazy.attr("data-src");
            var $nextload = $previousSlide.attr("data-src");
            $lazy.attr("src", $load).removeClass("lazy");
            $previousSlide.attr("src", $nextload).removeClass("lazy");
        },
        onSliderLoad: function(currentIndex) {
            // this is the messy part :-)
            var $lazy = $('.slider').eq(currentIndex).find(".lazy");
            var $load = $lazy.attr("data-src");
            console.log(currentIndex + ' - ' + $lazy + ' ' + $load);
            $lazy.attr("src", $load).removeClass("lazy");
            $('.slider .comment').eq(currentIndex + 1).addClass('active-slide');
        }
    });
}

<div class="slider">
    <div>
        <img class="lazy" src="img/loader.svg" data-src="img/images-portfolio/sdb-exercice-final.jpg" alt="Modélisation et rendu 3D Studio Max" />
        <div class="comment">
            <h4>3D Studio Max</h4>
        </div>
    </div>
</div>

Answer 1

这是解决方法

添加infiniteLoop：错误的参数，以避免bxslider创建幻灯片的克隆。

$('.slider').bxSlider({
        adaptiveHeight:   true,
        keyboardEnabled: true,
        pagerType: 'short',
        startSlide: imagenum,
        useCSS: false,
        infiniteLoop: false,
        hideControlOnEnd: true
});

jQuery bxslider ajax加载

1 个答案: