项目值2的jQuery Owl Carousel动画答案

【问题标题】：jQuery Owl Carousel animation for items value 2项目值2的jQuery Owl Carousel动画
【发布时间】：2015-05-27 20:32:16
【问题描述】：

当我尝试使用 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个项目）动画？猫头鹰旋转木马可以做到这一点吗？

【问题讨论】：

你有例子吗？

标签： javascript jquery html css owl-carousel

【解决方案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>

【讨论】：