owl carousel如何实现淡入淡出？

独行剑侠 · 发表于 2021-7-21 09:46

如题。
百毒找到的一个jQuery幻灯片插件OWL Carousel
百度了半天没有找到如何调整切换小改为淡入淡出，始终是右滑轮播效果。
文档地址：www.jq22.com/jquery-info5071
求助如何调整

dleo · 发表于 2021-7-21 10:16

下载一个 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
});

独行剑侠 · 发表于 2021-7-21 20:33

非常感谢，就是这句：
animateOut: 'fadeOut',
animateIn: 'fadeIn',

成功！

独行剑侠 · 发表于 2021-7-27 20:43

本帖最后由独行剑侠于 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控制是这样给的

[JavaScript] 纯文本查看 复制代码

    // 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:50

本帖最后由 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.
这几项关掉试试看,我没试过

独行剑侠 · 发表于 2021-7-28 08:29

dleo 发表于 2021-7-27 23:50
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
mouseDragType: Boolean
Default: ...

非常感谢~

帐号		自动登录	找回密码
密码			注册[Register]

[求助] owl carousel如何实现淡入淡出？

免费评分

免费评分