CODEWITHSUNDEEP
jquerybxslider
Meek
Meek

Reputation: 3348

BxSlider: call onSliderLoad on window.resize

I would like to reload BxSlider on window resize and fire the callbacks - however, I can't get it to work.

I have this script which will clone and display captions in a separate div when window size is less than 768px - it works as expected, but not when I resize the browser window. Somehow the function inside onSliderLoad and onSlideBefore doesn't work - apparently because the captions have disappeared from the DOM - any ideas why?

I have used this guide.

My code:

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());
            }
        }
    });
});

Upvotes: 1

Views: 3077

Answers (1)

Meek
Meek

Reputation: 3348

It seems that changing the caption class name and the selectors inside the functions did the trick. This code works:

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");
                    }
                }
            });
        });

Upvotes: 1

Related Questions