owl carousel 2 淡入淡出效果不起作用答案

【问题标题】：owl carousel 2 fade effect not workingowl carousel 2 淡入淡出效果不起作用
【发布时间】：2016-10-01 17:15:55
【问题描述】：

我目前正在尝试使用具有淡入淡出效果的 owl carousel 2，但它显示了默认的滑动效果。我该如何解决它。

这是我的代码

  function owlWrapperWidth( selector ) {
  $(selector).each(function(){
    $(this).find('.owl-carousel').outerWidth( $(this).closest( selector ).innerWidth() );
  });
}

owlWrapperWidth( '.owl-wrapper' );
$( window ).resize(function() {
  owlWrapperWidth( $('.owl-wrapper') );
});

$('.owl-carousel').owlCarousel({ animateOut: 'fadeOut',

    animateIn: 'fadeIn',
  nav:true,  





    loop: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },     
      1000: {
        items: 3,
        slideBy:3,
      }
    }
  });

我添加了 animateIn:'fadeIn' 但完全没有成功

谢谢

【问题讨论】：

标签： jquery slider fadein owl-carousel

【解决方案1】：

猫头鹰动画功能仅适用于“单项”轮播（一次仅显示一张幻灯片）：

“动画功能仅适用于一项，并且仅适用于支持透视属性的浏览器。”

请看这里：http://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

这是我当前使用fadeIn 和fadeOut 的滑块实现之一，从各方面来看，您的代码对于核心owl 看起来都是正确的，而且效果很好。

$('.index-gallery .owlcarousel').owlCarousel({
  themeClass: 'owl-fullscreen owl-nonav white owl-loaded',
  autoplay:true,
  autoplayTimeout: 4000,
  items:1, // items to display in slider
  //margin:0, // margin(px) on item.
  //LOOP? - IF ONLY ONE SLIDE SEE: https://github.com/smashingboxes/OwlCarousel2/issues/548
  loop:true, // Inifnity loop. Duplicate last and first items to get loop illusion. 
  navRewind:true, // Go to first/last.
  nav:true, // left and right arrows
  autoHeight: true,
  navContainerClass: 'owl-buttons',
  dotsClass: 'owl-pagination',
  dotClass: 'owl-page',
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  autoplayHoverPause:true, //false
  lazyLoad: false, // IMG need special markup class="lazyOwl" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img"
  dots:false // true
});

您可能希望查看此主题以获得更多建议/解决方案/想法：

Owl Carousel fade effect not working

【讨论】：

干得好。谢谢