CODEWITHSUNDEEP
javascriptjqueryhtmlbxslider
rishiraj shekhawat
rishiraj shekhawat

Reputation: 194

bxslider stacked before pageload

I am using bx-slider and facing a problem that on pageload images of slider are not loading perfectly. All I want that images should be fully load on page load or load after complete page load, or images will hide until page not fully loaded. here is java script code

 $(window).load(function () { 
var $heroSlides = $('.hero-slider ul.bxslider > li');
        if ($heroSlides.length > 1) {
            var slider = $('.hero-slider .bxslider').bxSlider({
                responsive: true,
                auto: true,
                pause: 5000,
                controls: false,
                autoHover: true,
                mode: 'fade'
            });
        }
 });

Upvotes: 0

Views: 442

Answers (1)

Mahendra Shekhawat
Mahendra Shekhawat

Reputation: 307

Try this - Update your css and hide slider outer DIV

.hero-slider {
display:none;
}

and then show it just before slider call in your script.

     $(window).load(function () { 
    $('.hero-slider').show();
    var $heroSlides = $('.hero-slider ul.bxslider > li');
            if ($heroSlides.length > 1) {
                var slider = $('.hero-slider .bxslider').bxSlider({
                    responsive: true,
                    auto: true,
                    pause: 5000,
                    controls: false,
                    autoHover: true,
                    mode: 'fade'
                });
            }
     });

Try with document.ready if window.load does not work.

Upvotes: 1

Related Questions