jQuery 猫头鹰旋转木马幻灯片速度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26443205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
owl carousel slideSpeed not working
提问by danjfoley
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.
我的主页上设置了多个猫头鹰旋转木马。我将第一个（关于免费送货的）设置为 10000 的 slideSpeed。如您所见，所有幻灯片都以相同的速度变化。
Is there a reason this doesn't work? Am i doing something wrong?
有没有理由这不起作用？难道我做错了什么？
回答by neoMagic
Please note that you have to use
请注意，您必须使用
autoplay:true,
autoplayTimeout:5000
when using owlCarousel 2.0
使用 owlCarousel 2.0 时
回答by danjfoley
Autoplay is where you set the slide changing speed. Not slidespeed
自动播放是您设置幻灯片更改速度的地方。不是滑动速度
回答by Azamat Mirvosiqov
Just set time to autoPlayoption
只需将时间设置为自动播放选项
$("#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
});
回答by Jon
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.
注意：此回复适用于猫头鹰旋转木马2，仅适用于淡入淡出过渡的速度。如果您的旋转木马滑动而不是消失，请忽略此答案。这不是对原始问题的直接回答，但希望有助于更全面地了解如何控制 OwlCarousel 2 中的幻灯片过渡速度。当我从 Google 来到这里试图找出如何控制淡入淡出速度时，我希望你能容忍它存在，因为它可能对其他人有用。
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.
我没有尝试使用 smartSpeed 或任何其他选项来设置淡入淡出过渡的持续时间，但是在阅读他们使用 animate.css 后，我猜想覆盖 css3 过渡速度将是关键，所以我在滑块，它起作用了。
<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:
在我的$(".owl-carousel").owlCarousel({})函数中，我将自动播放设置如下：
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.
3s css3 过渡持续时间与 5000ms autoplayTimeout 相结合意味着一个过渡结束和下一个过渡开始之间有 2 秒 - 如果您希望幻灯片在下一个过渡之前等待 5 秒，您需要将 css 过渡时间添加到 autoplayTimeout，例如 autoplayTimeout ：在本例中为 8000。
回答by Diwakar Singh
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
}
}
});
回答by Ebrahim Amer
for version 2.3.4, you should follow the following convention to change time
对于 2.3.4 版本，您应该遵循以下约定来更改时间
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
这是参考：https: //owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
回答by Thet
Hi I am using Owl Carousel beta 2.0.0 I found one option to delay the slide speed Edit the option "smartSpeed: milliseconds"
嗨，我正在使用 Owl Carousel beta 2.0.0 我找到了一种延迟滑动速度的选项编辑选项“smartSpeed：毫秒”
Try this code:
试试这个代码：
mbanner = $("#mainbanner").owlCarousel({
items: 1,
loop: true,
autoplay: true,
responsiveClass: true,
center: true,
center: true,
});
回答by alib0ng0
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.
...这将减慢过渡速度。
回答by saeid mohammad hashem
for change sliding speed test this code: (autoplayTimeoutproperty can set slid's duration time)
更改滑动速度测试此代码：（autoplayTimeout属性可以设置滑动的持续时间）
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
}
}
});
});
回答by Mister
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 : 5000 每 5 秒播放一次。如果设置 autoPlay: true 默认速度将为 5 秒。
Зм?н?ть значення на любе ц?ле число, наприклад autoPlay : 10000, пауза автозм?нювання складатиме 10 секунд. Якщо встановити значення "true", швидк?сть автоан?мац?? становитиме 5 секунд.
Зм?н?ть значення на любе ц?ле число, наприклад 自动播放 : 10000, пауза автозм?нювання складатимекнд 10 Якщо встановити значення "true", швидк?сть автоан?мац?? становитиме 5 секунд。
