javascript - 元素值 2 的 jQuery Owl 轮播动画

Question

当我尝试使用 Owl Carousel 的动画进出功能并显示 2 个元素时，过渡动画不起作用。

这是我正在尝试的配置:(items:2)

$('[shoppable-image-container]').owlCarousel({
                loop:true,
                nav: true,
                navText: ["<a><span></span></a>","<a><span></span></a>"],
                lazyLoad : true,
                dots: true,
                animateOut: 'fadeOut',
                animateIn: 'fadeIn',
                items:2,
                margin:10 ,
                autoplay:true,
                // autoplayTimeout:4000,
                smartSpeed:2000  
            }); 

使用以下配置动画，它工作正常:(items:1)

$('[shoppable-image-container]').owlCarousel({
                loop:true,
                nav: true,
                navText: ["<a><span></span></a>","<a><span></span></a>"],
                lazyLoad : true,
                dots: true,
                animateOut: 'fadeOut',
                animateIn: 'fadeIn',
                items:1,
                margin:10 ,
                autoplay:true,
                // autoplayTimeout:4000,
                smartSpeed:2000  
            }); 

如何使用 owl Carousel 一起实现多个元素(特别是 2 个元素)动画？ Owl Carousel 是否可行？

Answer 1

试试这个:

$('.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>