貓頭鷹旋轉木馬在頁面加載

http://www.exclusivecard.co.uk/offers.php

我已經運行幾個貓頭鷹旋轉木馬上。你會注意到，當你第一次加載頁面時，輪播中的全部內容都會以全角閃爍，直到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] 
    ], 

    //navigation:true, 
// navigationText: [ 
//  "<i class=' btn '>< Previous </i>", 
//  "<i class='btn '>Next ></i>" 
//  ], 
    }); 
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?> 

});

來源

2015-12-02 Daniel Robinson

您可以添加一些加載器到頁面，並在jQuery完成後刪除它。 –

可以隱藏在你的CSS display: none;傳送帶項目，然後在傳送帶通過將處理程序綁定到初始化事件後初始化後顯示它們。我發現最好將它與一個具有加載器gif的佔位符結合使用，以進一步減少頁面跳轉。

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

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

}).owlCarousel(options);

請注意，您必須在初始化傳送帶之前綁定處理程序。

來源

2015-12-02 23:28:38 Taytorious

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

來源

2016-04-25 14:11:59

歡迎來到Stackoverflow。感謝您回答這個問題。爲了改進這個答案，解釋了爲什麼這將解決OP的問題，以及在他們的示例代碼中他們應該把它放在哪裏。有關編寫好答案的更多信息，請參閱https://stackoverflow.com/help/how-to-answer –

如果使用OwlCarousel2，插件高度的CSS類.owl-loaded到.owl-carousel它呈現完畢旋轉木馬項目之後。只需在容器上設置display: none，並在附加的類上重置display: block。

即在你的CSS文件：

.owl-carousel { 
    display: none; 
} 

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

來源

2017-09-05 22:30:13 jbiddick

上裝載只是隱藏圖像和將在車展加載完成後！

 
.owl-carousel.loading{ 

display:none; 

}

來源

2017-10-06 11:27:26

貓頭鷹旋轉木馬在頁面加載

回答

相關問題