Iam目前正在尝试使用具有淡入淡出效果的猫头鹰旋转木马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传送带&#39)。owlCarousel({ animateOut:' fadeOut',
animateIn: 'fadeIn',
nav:true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3,
slideBy:3,
}
}
});
我添加了animateIn:' fadeIn'但根本没有成功
由于
答案 0 :(得分:4)
猫头鹰动画功能仅适用于"单项"旋转木马(一次只显示一张幻灯片):
" Animate功能仅适用于一个项目,仅适用于支持透视属性的浏览器。"
见这里:http://owlcarousel2.github.io/OwlCarousel2/demos/animate.html
这是我当前使用fadeIn和fadeOut的滑块实现之一,并且根据所有帐户,您的代码看起来对核心猫头鹰来说是正确的,这很有效。
$('.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
});
您可能希望看到此主题以获得进一步的建议/解决方案/想法: