多個幻燈片貓頭鷹旋轉木馬上的動畫

有關於多個幻燈片項目上的動畫的任何功能？我已經在單張幻燈片上試過了，但沒有在多張幻燈片上工作。多個幻燈片貓頭鷹旋轉木馬上的動畫

您可以使用JSFiddle或以下代碼進行調試。

$('.loop-test').owlCarousel({ 
 
    center: true, 
 
    items: 2, 
 
    loop: true, 
 
    margin: 10, 
 
    animateOut: 'slideOutDown', 
 
    animateIn: 'flipInX', 
 
    dots: true 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script> 
 

 

 
<div class="owl-carousel loop-test"> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
    <div> Your Content </div> 
 
</div>

任何指針將不勝感激！

謝謝。

來源

2017-02-20 Kumar

你撥弄不掛..請聯繫，所以我可以看到你已經嘗試了什麼。 –

這裏是小提琴鏈接https://jsfiddle.net/f35ar43x/1/ – Kumar

你能解釋一下理想的行爲嗎？這將有助於獲得更好的解決方案。 – Rajesh

根據我的理解，你正在尋找不同的幻燈片過渡。

每張幻燈片都將獲取動畫類並將其添加到該項目，從而爲每張幻燈片提供不同的動畫。

這裏是updated fiddle

<div class="owl-carousel loop-test"> 
    <div data-animate="flipInX animated"> Your Content </div> 
    <div data-animate="bounceIn animated"> Your Content </div> 
    <div data-animate="fadeIn animated"> Your Content 2 </div> 
    <div data-animate="flipInX animated"> Your Content </div> 
    <div data-animate="fadeIn animated"> Your Content </div> 
    <div data-animate="flipInY animated"> Your Content </div> 
    <div data-animate="fadeIn animated"> Your Content </div> 
</div>

來源

2017-03-20 07:52:55 Aslam

嘗試自動播放

var owl = $('.owl-carousel'); 
owl.owlCarousel({ 
    items:4, 
    loop:true, 
    margin:10, 
    autoplay:true, 
    autoplayTimeout:1000, 
    autoplayHoverPause:true 
}); 
$('.play').on('click',function(){ 
    owl.trigger('play.owl.autoplay',[1000]) 
}) 
$('.stop').on('click',function(){ 
    owl.trigger('stop.owl.autoplay') 
})

JSFiddle link

來源

2017-03-20 07:11:07

$('.loop-test').owlCarousel({ 
 
    loop: true, 
 
    items: 2, 
 
    nav: true 
 
}); 
 
$('.loop-test').on('translate.owl.carousel', function(event) { 
 
    $(this).find(".item").hide(); 
 
}); 
 

 
$('.loop-test').on('translated.owl.carousel', function(event) { 
 
$(this).find(".item").fadeIn(800); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script> 
 

 

 
<div class="owl-carousel owl-theme loop-test"> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
    <div class="item"> Your Content </div> 
 
</div>

來源

2017-07-29 12:13:14

多個幻燈片貓頭鷹旋轉木馬上的動畫

回答

相關問題