猫头鹰轮播在页面加载时闪烁答案

【问题标题】：owl carousel flashing on page load猫头鹰轮播在页面加载时闪烁
【发布时间】：2015-12-02 11:44:03
【问题描述】：

我有几个猫头鹰旋转木马正在运行。当它第一次加载时，轮播会以全宽闪烁，直到 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（猫头鹰）

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

});

【问题讨论】：

您可以在页面中添加一些加载器，然后在所有 jquery 完成后将其删除。

标签： jquery html twitter-bootstrap owl-carousel

【解决方案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);

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

【讨论】：

我无法让initialized.owl.carousel 工作，所以我设置了样式.rotating-item { display:none }，然后在owlCarousel jquery 之后使用以下内容显示$('#rotator .rotating-item').show();

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

即在您的 CSS 文件中：

.owl-carousel {
    display: none; 
}

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

【讨论】：

【解决方案4】：

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

试试这个。

【讨论】：

【解决方案5】：

亲爱的开发者你好，

我正在使用 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
         }
      }
   });

【讨论】：

它不工作。当页面加载时，垂直空间很大。

【解决方案6】：

创建一个蒙版或一个空的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();
    }

【讨论】：

【解决方案7】：

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

【讨论】：

欢迎来到 Stackoverflow。感谢您对这个问题的回答。为了改进这个答案，解释为什么这将解决 OP 的问题，以及他们应该在他们的示例代码中的什么位置。有关编写好答案的更多信息，请参阅stackoverflow.com/help/how-to-answer

【解决方案8】：

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

.owl-carousel.loading{ 显示：无； }

【讨论】：