owl carousel如何实现淡入淡出？
如题。百毒找到的一个jQuery幻灯片插件OWL Carousel
百度了半天没有找到如何调整切换小改为淡入淡出，始终是右滑轮播效果。
文档地址：www.jq22.com/jquery-info5071
求助如何调整
下载一个 animate.css 看官方文档
Animate Demo | Owl Carousel | 2.3.4
https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html
$('.custom1').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
}); 非常感谢，就是这句：
animateOut: 'fadeOut',
animateIn: 'fadeIn',
成功！ 本帖最后由 独行剑侠 于 2021-7-27 20:49 编辑
dleo 发表于 2021-7-21 10:16
下载一个 animate.css 看官方文档
Animate Demo | Owl Carousel | 2.3.4
https://owlcarousel2.github.io ...
劳烦再请教一下，发现点问题，
加上
animateOut: 'fadeOut',
animateIn: 'fadeIn',
是有淡入淡出了，点击左右箭头可以淡入淡出，但是鼠标拖动竟然还能拖着滑动轮播……
在哪能调整只能淡入淡出，不被拖动影响？
目前的js控制是这样给的
// carousel
var owl = $('.list-banner .owl-carousel');
if (owl.length > 0) {
owl.owlCarousel({
items:1,
loop:true,
margin:10,
smartSpeed:1000,
autoplay:true,
touchDrag:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
responsiveClass:true,
animateOut: 'fadeOut', // 淡入足以
responsive:{
0:{
items:1,
margin:10,
nav: false,
},
768:{
nav: true,
navText:['<i class="iconfont icon-left"></i>','<i class="iconfont icon-right"></i>'],
},
992:{
nav: true,
navText:['<i class="iconfont icon-left"></i>','<i class="iconfont icon-right"></i>'],
}
}
});
}
本帖最后由 dleo 于 2021-7-27 23:52 编辑
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
mouseDragType: Boolean
Default: true
Mouse drag enabled.touchDrag
Type: Boolean
Default: true
Touch drag enabled.pullDragType: Boolean
Default: true
Stage pull to edge.
这几项关掉试试看,我没试过 dleo 发表于 2021-7-27 23:50
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
mouseDragType: Boolean
Default:...
非常感谢~
页:
[1]