添加類OWL的旋轉木馬afterLazyLoad

我使用OWL Carousel，試圖lazyLoad後添加.border-red類<div class="item">，意味着調用這個函數lazyLoad afterLazyLoad

例後：$(".item").addClass("border-red");懶加載時。意思是在OWLCarousel lazyLoaded之後添加類函數執行。添加類OWL的旋轉木馬afterLazyLoad

$(document).ready(function() { 

$("#owl-demo").owlCarousel({ 
items : 4, 
lazyLoad : true, 
navigation : true 
}); 

});

HTML

<div id="owl-demo" class="owl-carousel"> 
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div> 
    <div class="item"><img class="lazyOwl" data-src="assets/owl1.jpg" alt="Lazy Owl Image"></div> 
    <div class="item"><img class="lazyOwl" data-src="assets/owl2.jpg" alt="Lazy Owl Image"></div> 
    <div class="item"><img class="lazyOwl" data-src="assets/owl3.jpg" alt="Lazy Owl Image"></div> 
    <div class="item"><img class="lazyOwl" data-src="assets/owl5.jpg" alt="Lazy Owl Image"></div> 
</div>

這裏是OWLCarousel Options and Callbacks
OWLCarousel demo>
如何addclassØ功能後執行WLCarousel lazyLoaded？

來源

2015-09-29 Aariba

您需要設置'afterLazyLoad'爲'真'，你的選擇，就像你'lazyLoad'和'做導航'。您應該能夠通過此選項更新訪問回調函數。 –

@TylerSloan嗨，謝謝，但如何訪問回調函數？ – Aariba

@ vijayP的回答很好。 –

試試這個：

$(document).ready(function() { 

    $("#owl-demo").owlCarousel({ 
     items : 4, 
     lazyLoad : true, 
     navigation : true, 
     afterLazyLoad: function(elem){ 
      $(elem).addClass("border-red"); 
     } 
    }); 

});

這裏afterLazyLoad是一個回調函數

來源

2015-09-29 14:11:11 vijayP

嗨，謝謝，但沒有工作:( – Aariba

剛剛看到了貓頭鷹傳送帶的執行情況，上面的代碼做了小改動，請您再試一次這個更新的代碼嗎？ – vijayP

Hi it works，Progress Bar has gone，mean進度條沒有顯示，下面是進度條的演示：http：//owlgraphic.com/owlcarousel/demos/progressBar.html – Aariba

添加類OWL的旋轉木馬afterLazyLoad

回答

相關問題