Javascript 项目值2的jQuery Owl旋转木马动画

当我尝试使用猫头鹰旋转木马的“动画输入和输出”功能并显示2个项目时，过渡动画不起作用

这是我正在尝试的配置：（项：2）

$（“[shoppable image container]”）。owlCarousel({
循环：对，
导航：是的，
导航文本：[“”，“”]，
懒汉：没错，
点：是的，
动画衰减：“衰减”，
animateIn:“fadeIn”，
项目：2，
差额：10，
自动播放：对，
//自动播放超时：4000，
智能速度：2000
}); 

通过以下配置动画，它可以正常工作：（项：1）

$（“[shoppable image container]”）。owlCarousel({
循环：对，
导航：是的，
导航文本：[“”，“”]，
懒汉：没错，
点：是的，
动画衰减：“衰减”，
animateIn:“fadeIn”，
项目：1，
差额：10，
自动播放：对，
//自动播放超时：4000，
智能速度：2000
}); 

如何使用owl旋转木马一起实现多个项目（特别是两个项目）动画？猫头鹰旋转木马可以做到这一点吗？

试试这个：

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

$（'.loop test'）.owlCarousel({
循环：对，
项目：2，
导航：对
});
$（'.loop test'）.on（'translate.owl.carousel'，函数（事件）{
$（this.find（“.item”）.hide（）；
});
$（'.loop test'）.on（'translated.owl.carousel'，函数（事件）{
$（this.find（“.item”）.fadeIn（800）；
});
你的内容
你的内容
你的内容
你的内容
你的内容
你的内容
你的内容

你有没有举个例子？

$('[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  
            }); 

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