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?

Guenzi

Answer 1

Autoplay is where you set the slide changing speed. Not slidespeed

Guenzi

Answer 2

Please note that you have to use

autoplay:true,
autoplayTimeout:5000 

when using owlCarousel 2.0

Spindle

Answer 3

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

Libbielibbna

what is slideSpeed and paginationSpeed? – Lust

slideSpeed - time in milliseconds which spends for sliding from one to second slide. paginationSpeed - is same as slideSpeed but uses when you click pagination dots – Libbielibbna

Which speed setting is to overwrite the 5sec that a person looks like slide 2 before work starts to move him to slide 3. Its not enough time for person to read content on slide 2 with 5sec, I want to overwrite it to 7seconds. – Apoplectic

Answer 4

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.

Kling

Thanks. This helped me. One thing I should note, I had content inside my owl-item that was set to position: absolute with a z-index of 1. That was causing the positioned content to pop in right away with no fade. I removed the z-index and that fully solved my issues. – Court

This solution helped me slow down the transition duration..Thanks :) – Tocology

Answer 5

jQuery('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    dots: true,

    autoplay: 3000, // time for slides changes

    smartSpeed: 1000, // duration of change of 1 slide

    responsiveClass:true,

    responsive:{

        0:{

            items:1

        },

        600:{

            items:1

        },

        1000:{

            items:1,

            loop:true

        }

    }

});

Jd

Please add the main points of your solution instead of just code. – Frenchpolish

Answer 6

for version 2.3.4, you should follow the following convention to change time

autoplay:true,
autoplayTimeout:1000

because the default values are

// default settings:
autoplay:false
autoplayTimeout:5000

and here is the reference: https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html

Thiazine

Answer 7

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

Seaward

Answer 8

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.

Chesty

This works but if carousel has stagePadding then item images are appearing with a glitch move – Ayeshaayin

Answer 9

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

                    });

Yugoslav

Answer 10

The slidespeed is set by the smartSpeed parameter

jQuery('.owl-carousel').owlCarousel({
    smartSpeed: 3000
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Edict

Answer 11

 loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navSpeed: 700,
//All your need is here,
autoplayTimeout:1000,// to maintain speed
autoplay:true,

Poised

This is kinda short - what exactly is the answer and how does this solve it? – Anticlockwise

by adding autoplay time out – Poised

Gotcha - I was confused because that's what the highest voted answer already said. Thanks for clarifying. – Anticlockwise

Answer 12

Change to any integrer for example autoPlay : 5000 to play every 5 seconds. If you set autoPlay: true default speed will be 5 seconds.

Змініть значення на любе ціле число, наприклад autoPlay : 10000, пауза автозмінювання складатиме 10 секунд. Якщо встановити значення "true", швидкість автоанімації становитиме 5 секунд.

Alamein

Please use English in the comment so everyone can benefit. – Deutzia