owl carousel slideSpeed not working

Question

I have multiple owl carousel set up on my home page. I have the first one (the one about free shipping) set to a slideSpeed of 10000. As you can see all the slide change at the same speed.

Is there a reason this doesn't work? Am i doing something wrong?

Answer 1

Just set time to autoPlay option

$("#slider").owlCarousel({
    autoPlay: 2500,
    //autoPlay: true, <-- if you want to set default slide time (5000)

    slideSpeed: 300,
    paginationSpeed: 500,
    singleItem: true,
    navigation: true,
    scrollPerPage: true
});

Answer 2

Hi I am using Owl Carousel beta 2.0.0 I found one option to delay the slide speed Edit the option "smartSpeed: milliseconds"

Try this code:

mbanner = $("#mainbanner").owlCarousel({
  items: 1,
  loop: true,
  autoplay: true,
  responsiveClass: true,
  center: true,
  center: true,
});

Answer 3

Please note that you have to use

    autoplay:true,
    autoplayTimeout:5000 

when using owlCarousel 2.0

Answer 4

for change sliding speed test this code: (autoplayTimeout property can set slid's duration time)

                    jQuery(document).ready(function ($) {

                        var ocClients = $("#Slider");

                        ocClients.owlCarousel({
                            loop: true,
                            nav: false,
                            autoplay: true,
                            autoplayTimeout: 2000,
                            dots: false,
                            autoplayHoverPause: false,
                            responsive: {
                                0: {
                                    items: 1
                                },
                                480: {
                                    items: 3
                                },
                                768: {
                                    items: 4
                                },
                                992: {
                                    items: 5
                                },
                                1200: {
                                    items: 7
                                }
                            }
                        });

                    });

Answer 5

Note: This reply applies to Owl Carousel 2, and the speed of fade transitions only. If your carousel slides rather than fades, please ignore this answer. It's not a direct answer to the original question but hopefully contributes to a more general understanding of how to control slide transition speeds in OwlCarousel 2. As I got here from Google trying to find out how to control the fade speed I hope you will tolerate its presence as it may be useful to others.

---

I got nowhere trying to use smartSpeed or any other option to set the duration of fade transitions, but having read they used animate.css I guessed that overriding the css3 transition speed would be the key, so I dumped the following onto the page before the slider and it worked.

<style type="text/css">
.my-parent-class .owl-carousel .owl-item {
    -webkit-animation-duration: 3s !important;
    animation-duration: 3s !important;
}
</style>

This doesn't affect sliding speed, just fade speed. If you have a slidey slider this isn't the answer for you.

In my $(".owl-carousel").owlCarousel({}) function I set autoplay as follows:

autoplay: true,
autoplayTimeout: 5000,  

The 3s css3 transition duration combined with 5000ms autoplayTimeout means 2 seconds between one transition ending and the next one starting - if you wanted the slide to wait 5 seconds before the next transition you'd need to add the css transition time to autoplayTimeout, e.g. autoplayTimeout: 8000 in this example.

Answer 6

To change the speed at which the sliders slide you need to apply this...

<style type="text/css">
.owl-stage {
transition: 0.8s !important;
}
</style>

...this will slow the transitions down.