bxslider在页面加载前堆叠

bxslider stacked before pageload

本文关键字：加载 bxslider      更新时间：2023-09-26

我正在使用bx滑块，并面临一个问题，即滑块的页面加载图像没有完美加载。我所希望的是，图像应该在页面加载时完全加载或在页面加载完成后加载，否则图像将隐藏直到页面未完全加载。这是java脚本代码

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

试试这个-更新css并隐藏滑块外部DIV

.hero-slider {
display:none;
}

然后在脚本中的滑块调用之前显示它。

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

如果window.load不起作用，请尝试使用document.ready。

相关文章：