Baykuş Döngüsü 2 animasyon ben bu talimatı yerine getirdikten

Question

işe ama kaydırıcı fadeOut ve fadeIn animasyon yapamaz: http://www.owlcarousel.owlgraphic.com/demos/animate.html

Kafa Css:

<link rel="stylesheet" href="css/animate.css"> 
<link rel="stylesheet" href="css/owl.carousel.css"> 

Html öğeyi:

<div id="product-designs-presentation" class="owl-carousel"> 
    <div style="width:186px"> 
     <img src="svg/shirt-design-1.svg" alt="">a 
    </div> 
    <div style="width:186px"> 
     <img src="svg/shirt-design-2.svg" alt=""> 
    </div> 
</div> 

Javascript:

<script type="text/javascript" src="js/owl.carousel.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#product-designs-presentation').owlCarousel({ 
     animateOut: 'fadeOut', 
     animateIn: 'fadeIn', 
     items:1, 
     autoPlay:true, 
     autoPlayTimeout:1000, 
     autoplayHoverPause:true, 
     navigation: true, 
     navigationText: ["prev","next"] 
    }); 
}); 

</script> 

Sorun nedir?

Answer 1

Bu baykuş-atlıkarınca çalışması için gerekli olan bu sınıfı kaçırmışsınız class='owl-carousel'. Ben bunun bu çalışmaktadır owl docs

<div id="product-designs-presentation" class="owl-carousel"> 
    <div style="width:186px"> 
     <img src="svg/shirt-design-1.svg" alt="">a 
    </div> 
    <div style="width:186px"> 
     <img src="svg/shirt-design-2.svg" alt=""> 
    </div> 
</div> 

bunu kullanın css sorun olduğunu düşünüyorum

$(document).ready(function() { 
 
    $('#product-designs-presentation').owlCarousel({ 
 
     \t animateOut: 'fadeOut', 
 
     animateIn: 'fadeIn', 
 
     items:1, 
 
     autoPlay:true, 
 
     autoPlayTimeout:1000, 
 
     autoplayHoverPause:true, 
 
     navigation: true, 
 
     navigationText: ["prev","next"] 
 
    }); 
 
});

<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> 
 

 

 

 

 
<div id="product-designs-presentation" class="owl-carousel"> 
 
    <div style="width:186px"> 
 
    <img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a 
 
    </div> 
 
    <div style="width:186px"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b 
 
    </div> 
 
</div>