Question

我想在窗口调整大小时重新加载BxSlider并触发回调 - 但是，我无法让它工作。

我有this script，当窗口大小小于768px时，它将在单独的div中克隆并显示标题 - 它按预期工作，但在我调整浏览器窗口大小时则不行。不知怎的，onSliderLoad和onSlideBefore中的函数不起作用 - 显然是因为字幕已经从DOM中消失了 - 任何想法为什么？

我使用了this guide。

我的代码：

var windowsize = $(window).width();
var slider = $('.bxslider').bxSlider({
    auto: true,
    autoHover: true,
    controls: false,
    infiniteLoop: true,
    onSliderLoad: function(currentIndex) {
        if (windowsize < 768) {
            $("#caption").html($('.bxslider li').eq(currentIndex + 1).find(".bx-caption").clone());
        }
    },
    onSlideBefore: function($slideElement, oldIndex, newIndex) {
        if (windowsize < 768) {
            $("#caption").html($slideElement.find(".bx-caption").clone());
        }
    }
});
$(window).resize(function() {
    slider.reloadSlider({
        auto: true,
        autoHover: true,
        controls: false,
        infiniteLoop: true,
        onSliderLoad: function(currentIndex) {
            $("#caption").html($('.bxslider li').eq(currentIndex + 1).find(".bx-caption").clone());
        },
        onSlideBefore: function($slideElement, oldIndex, newIndex) {
            if (windowsize < 768) {
                $("#caption").html($slideElement.find(".bx-caption").clone());
            }
        }
    });
});

Answer 1

似乎更改标题类名称和函数内部的选择器就可以了。此代码有效：

var windowsize = $(window).width();
        var slider = $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
            controls: false,
            infiniteLoop: true,
            onSliderLoad: function(currentIndex) {
                if (windowsize < 768) {
                    $("#caption").html("");
                    $('.bxslider li').eq(currentIndex + 1).find(".caption").clone().appendTo("#caption");
                }
            },
            onSlideBefore: function($slideElement, oldIndex, newIndex) {
                if (windowsize < 768) {
                    $("#caption").html("");
                    $slideElement.find(".caption").clone().appendTo("#caption");
                }
            }
        });
        $(window).resize(function() {
            slider.reloadSlider({
                auto: true,
                autoHover: true,
                controls: false,
                infiniteLoop: true,
                onSliderLoad: function(currentIndex) {
                    if (windowsize < 768) {
                        $("#caption").html("");
                        $('.bxslider li').eq(currentIndex + 1).find(".caption").clone().appendTo("#caption");
                    }
                },
                onSlideBefore: function($slideElement, oldIndex, newIndex) {
                    if (windowsize < 768) {
                        $("#caption").html("");
                        $slideElement.find(".caption").clone().appendTo("#caption");
                    }
                }
            });
        });

BxSlider：在window.resize上调用onSliderLoad

1 个答案: