javascript - OWL Carousel Fade Transition Speed - Stack Overflow

admin管理员组

文章数量:1332395

Am using OWL v2.0 and load animate.css to support 'fadeIn' and 'fadeOut', but having difficulty in trying to extend the transition time of the fade between slide 1 and slide 2. Seems to a constant 1 second or so whatever I try.

        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')
            }
        });

Any ideas, thanks.

Am using OWL v2.0 and load animate.css to support 'fadeIn' and 'fadeOut', but having difficulty in trying to extend the transition time of the fade between slide 1 and slide 2. Seems to a constant 1 second or so whatever I try.

        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')
            }
        });

Any ideas, thanks.

• javascript
• owl-carousel

Share Improve this question Follow asked Apr 1, 2018 at 14:37 BartonBarton 14322 gold badges22 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The transition duration is in the owl.carousel.css file. At line 103 you should have:

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

try changing the animation-duration of 1000ms to your desired duration.

That's the autoplayTimeout you are talking about. No need to override the css.

Change the autoplayTimeout to 1000 when you want that the next slide will happen after 1 sec. Change the autoplaySpeed to 2000, when you want that that slide has a slide effect that takes up 2 sec. So when setting this: the first slide take 2 sec of duration when sliding. After 1 sec, the next will slide for 2sec, and so on...

本文标签： javascriptOWL Carousel Fade Transition SpeedStack Overflow