Question

使用OWL v2.0并加载animate.css以支持＆＃39; fadeIn＆＃39;和fadeOut＆＃39;，但是在尝试延长幻灯片1和幻灯片2之间淡入淡出的过渡时间时遇到了困难。无论我尝试什么，似乎都是一个恒定的1秒左右。

        owl.owlCarousel({
            nav: false, // Show next and prev buttons 
            items: 1,
            smartSpeed: 10000,
            dotsSpeed: 1000,
            dragEndSpeed: 1000,
            singleItem: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            pagination: false,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: false,
            loop: true,
            afterAction: function (el) {
                //remove class active
                this
                    .$owlItems
                    .removeClass('active')

                //add class active
                this
                    .$owlItems //owl internal $ object containing items
                    .eq(this.currentItem + 1)
                    .addClass('active')
            }
        });

任何想法，谢谢。

Answer 1

转换持续时间位于owl.carousel.css文件中。在第103行你应该：

.owl-caraousel .animated { 
  animation-duration: 1000ms;
  animation-fill-mode: both; }

尝试将1000毫秒的动画持续时间更改为所需的持续时间。

Answer 2

这就是您正在谈论的autoplayTimeout。无需覆盖CSS。

当您希望1秒钟后发生下一张幻灯片时，请将autoplayTimeout更改为1000。当您希望幻灯片具有2秒的幻灯片效果时，请将autoplaySpeed更改为2000。因此，设置此项时：滑动第一张幻灯片需要2秒钟的时间。 1秒后，下一个将滑动2秒，依此类推...

OWL Carousel淡化过渡速度

2 个答案: