Owl Carousel Animation Speed

Question

I have an Owl Carousel about halfway down the page here: https://www.lakeshoresup.com/product/pathfinder/

I would like to slow down the fade animation speed. I have tried the SlideSpeed and PaginationSpeed in the owl jQuery and it didn't work:

<script>
    jQuery(window).on("load", function(){
      jQuery('.carousel-wrapper .owl-carousel').owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: <?php if(!$autotimer) {echo 3000;} else {echo $autotimer;} ?>,
        nav: true,
        loop: true,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        slideSpeed: 3000,
        paginationSpeed: 3000,
        navText: ['<span>prev</span>', '<span>next</span>']
      });
    });

I also tried animation-duration in the css:

.owl-caraousel .animated { 
  animation-duration: 3000ms !important;
 }

Any ideas on how to slow this animation down. We are using fadeIn and fadeOut which look like this:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

In this page: https://stackoverflow.com/questions/26443205/owl-carousel-slidespeed-not-working I found that the solution `.owl-carousel .owl-item {animation-duration: 3s !important;}` could work for you. — ReSedano, Dec 16 '18 at 02:15

score 4 · Answer 1 · edited Mar 25 '20 at 11:10

4

Use smartSpeed:1500 in JavaScript

See it here https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

edited Mar 25 '20 at 11:10

Dharman

30,962
25
85
135

answered Mar 25 '20 at 11:00

Mahmoud Mohamed

41
3

score 0 · Answer 2 · answered Dec 16 '18 at 01:34

0

You can add animation-duration: [number]s; to .fadeIn to change how long the fade lasts.

answered Dec 16 '18 at 01:34

Dan K

38
4

score 0 · Answer 3 · answered Sep 09 '21 at 06:31

0

I also tried animation-duration in the css:

.owl-caraousel .animated { animation-duration: 3000ms !important; }

Use

.owl-carousel .animated {

instead of

.owl-caraousel .animated {

answered Sep 09 '21 at 06:31

Erkin Gökçer Erdem

1

Owl Carousel Animation Speed

3 Answers3