BxSlider：在 window.resize 上调用 onSliderLoad

Question

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

我有 this script，当 window 大小小于 768 像素时，它将在单独的 div 中克隆和显示字幕 - 它按预期工作，但在我调整浏览器大小时不工作window。 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

似乎更改标题 class 名称和函数内的选择器就可以解决问题。此代码有效：

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

BxSlider: call onSliderLoad on window.resize

jquery

bxslider