问题
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?
回答1:
Please note that you have to use
autoplay:true,
autoplayTimeout:5000
when using owlCarousel 2.0
回答2:
Autoplay is where you set the slide changing speed. Not slidespeed
回答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
});
回答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.
回答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
}
}
});
回答6:
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,
});
回答7:
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
回答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.
回答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
}
}
});
});
回答10:
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 секунд.
来源：https://stackoverflow.com/questions/26443205/owl-carousel-slidespeed-not-working