owl 页面加载时轮播闪烁

Question

我有几个 owl 轮播运行。当它第一次加载时，轮播以全宽闪烁，直到 jquery 开始，然后调整所有内容的大小。无论如何要阻止这个？这是我的代码：

Html

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

Jquery (owl)

 $(document).ready(function(){
<?php $i='1'; do { ?>
 $("#owlslide<?php echo $i;?>").owlCarousel({
  autoPlay: false, //Set AutoPlay to 3 seconds
  paginationNumbers: true,
   itemsCustom : [
    [0, 1],
    [450, 1],
    [600, 2],
    [700, 2],
    [1000, 3],
    [1200, 4],
    [1400, 4],
    [1600, 5]
  ],        
  });
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>

});

Answer 1

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

var carousel = $('#owlslide'); carousel.on({ 'initialized.owl.carousel': function () { carousel.find('.item').show(); carousel.find('.loading-placeholder').hide(); } }).owlCarousel(options);

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

Answer 2

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

Answer 3

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

上重置 display: block

即在您的 CSS 文件中：

.owl-carousel {
    display: none; 
}

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

Answer 4

加载时隐藏图片，加载完成后自动显示！

.owl-carousel.loading{

 display:none;

}

Answer 5

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

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

Answer 6

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

试试这个。

Answer 7

尊敬的开发人员，您好，

我正在使用 Bootstrap 4 框架，所以我在 .owl-carousel class 旁边添加了一个 .d-block class，然后我添加了a .d-none 在所有clild元素中，除了第一个（我希望第一个从一开始就可见）。

因此在初始化时，您需要运行 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 以隐藏整个滑块 block/div 并添加功能以隐藏遮罩并在 owl 轮播 [=11= 的 iniliatize 事件上显示滑块

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

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

owl 页面加载时轮播闪烁

owl carousel flashing on page load

jquery

html

twitter-bootstrap

owl-carousel