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?

score 21 · Answer 1 · edited Nov 24 '19 at 07:06

21

Please note that you have to use

autoplay:true,
autoplayTimeout:5000

when using owlCarousel 2.0

edited Nov 24 '19 at 07:06

Antonio Correia

1,093
1
15
22

answered Nov 10 '15 at 09:50

neoMagic

420
4
9

score 15 · Accepted Answer · answered Oct 19 '14 at 13:10

15

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

answered Oct 19 '14 at 13:10

danjfoley

778
1
8
20

score 15 · Answer 3 · answered Apr 26 '17 at 16:34

15

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

answered Apr 26 '17 at 16:34

Azamat Mirvosiqov

646
8
12

what is `slideSpeed` and `paginationSpeed`? – Amit Bera Sep 17 '19 at 20:58
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 – Azamat Mirvosiqov Sep 18 '19 at 03:46

score 7 · Answer 4 · edited Nov 20 '17 at 13:39

7

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

        }

    }

});

edited Nov 20 '17 at 13:39

pirho

11,565
12
43
70

answered Nov 20 '17 at 12:13

Diwakar Singh

101
1
1

Please add the main points of your solution instead of just code. – pirho Nov 20 '17 at 12:35

score 6 · Answer 5 · answered Sep 22 '16 at 09:34

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.

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. — Gavin, Jan 17 '17 at 02:41
This solution helped me slow down the transition duration..Thanks :) — Edgar, Jun 27 '19 at 19:46

score 5 · Answer 6 · answered May 01 '19 at 06:02

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

score 2 · Answer 7 · edited Mar 15 '18 at 14:47

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

edited Mar 15 '18 at 14:47

sikrew

7
7

answered Aug 16 '16 at 04:05

Thet

31
3

score 2 · Answer 8 · answered Jan 16 '17 at 10:36

2

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.

answered Jan 16 '17 at 10:36

alib0ng0

459
1
5
15

This works but if carousel has stagePadding then item images are appearing with a glitch move – Ivan Topić Feb 17 '18 at 23:59

saeid mohammad hashem · Answer 9 · 2017-09-14T08:50:57.047

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

                    });

score 0 · Answer 10 · answered Apr 13 '22 at 20:37

0

The slidespeed is set by the smartSpeed parameter

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

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

answered Apr 13 '22 at 20:37

semakarel

1

score 0 · Answer 11 · answered Sep 16 '22 at 05:55

0

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

answered Sep 16 '22 at 05:55

Kishor

53
4

1

This is kinda short - what exactly is the answer and how does this solve it? – mlhDev Sep 16 '22 at 21:23
by adding autoplay time out – Kishor Sep 28 '22 at 14:36
Gotcha - I was confused because that's what the [highest voted answer](https://stackoverflow.com/a/33627118/295686) already said. Thanks for clarifying. – mlhDev Sep 28 '22 at 19:30

Mister · Answer 12 · 2016-07-18T17:26:11.357

-2

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 секунд.

edited Jul 18 '16 at 17:26

answered Jul 18 '16 at 17:18

Mister

11
1

2

Please use English in the comment so everyone can benefit. – Mohamed Anis Dahmani Feb 28 '17 at 00:08

owl carousel slideSpeed not working

12 Answers12

Linked