Question

我有几个猫头鹰旋转木马在跑。当它第一次加载时，旋转木马以全宽闪烁，直到jquery开始，然后调整所有内容的大小。反正有没有阻止这个？这是我的代码：

HTML

$a = array_values($array);
print_r($a);

Jquery（猫头鹰）

 <?php $k='1'; do { ?>
 <div id="owlslide<?php echo $k;?>">
     <?php do { ?>
       <div class="owlItem ">
         <-- some other stuff -->
       </div>
     <?php  } while();?>
 </div>
 <?php $i++; } while();?>

Answer 1

您可以在CSS中隐藏带有display: none;的轮播项目，然后通过将处理程序绑定到 initialized.owl.carousel 事件来初始化轮播后显示它们。我发现将它与带有加载程序gif的占位符结合起来可以进一步减少页面跳转。

var carousel = $('#owlslide');
carousel.on({

    'initialized.owl.carousel': function () {
         carousel.find('.item').show();
         carousel.find('.loading-placeholder').hide();
    }

}).owlCarousel(options);

请注意，在初始化轮播之前必须绑定处理程序。

Answer 2

仍然不是最佳解决方案，但是如果将不透明度设置为0，它将在某种程度上起作用并且页面加载时所有项目都不存在。

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

Answer 3

$('.item').trigger('initialized.owl.carousel').show();

Answer 4

如果您使用的是OwlCarousel2，则插件在完成渲染轮播项目后，会将CSS类.owl-loaded附加到.owl-carousel。只需在容器上设置display: none，然后在附加的类上重置display: block。

即。在您的CSS文件中：

.owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}

Answer 5

只需在加载时隐藏图像，并在加载完成时自动显示！

.owl-carousel.loading{

 display:none;

}

Answer 6

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
    visibility:hidden;
    height:0;
}

尝试一下。

Answer 7

心爱的开发人员，

我正在使用Bootstrap 4框架，因此我在.owl-carousel类旁边添加了.d-block类，然后在所有clild元素中添加了.d-none，除了第一个元素（我想要从一开始就可以看到第一个）。

因此在初始化时，您将需要运行jQuery：

 var heroslider = $('#hero-slider');
    
    heroslider.on('initialize.owl.carousel', function(event) {
       $('#top-news').find(".owl-dot").eq(0).addClass("active");
       heroslider.find(".slider-item").removeClass('d-none');
    });

  heroslider.owlCarousel({
     loop: false,
     rewind: true,
     responsiveClass: true,
     margin: 0,
     dots: true,
     smartSpeed: 900,
     autoHeight: true,
     autoplay: true,
     autoplayTimeout: 8000,
     autoplayHoverPause: true,
     responsive:{
         0:{
             items:1,
             nav:false
         },
         600:{
              items:1,
              nav:false
         },
         1000:{
              items:1,
               nav:false
         }
      }
   });

Answer 8

创建一个遮罩或一个空的 div 来隐藏完整的滑块块/div 并添加隐藏遮罩的功能并在 owl carousel 的初始化事件中显示滑块

    $('.my-carousel').owlCarousel({
        items: 1,
        lazyLoad: true,
        onInitialized: showSlider
    });

    // Call back function onInitialized
    function showSlider(e) {
        $(".my-carousel-mask").hide();
        $(".my-carousel-gallery").show();
    }

猫头鹰旋转木马在页面加载时闪烁

8 个答案: