jQuery 实现旋转木马滑块自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36581504/
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
Materialize Carousel Slider autoplay
提问by Leandro Soriano
Is there a parameter to make the materialize carousel slider to auto play?
是否有参数可以使实现轮播滑块自动播放？
$('.carousel').carousel();
for example (this parameter doesn't work):
例如（此参数不起作用）：
$('.carousel').carousel({
autoplay: true
});
Thank you!
谢谢！
回答by Leandro Soriano
I resolved the problem with this:
我解决了这个问题：
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
回答by VeeK
Try executing nextmethod like this
尝试执行这样的next方法
$('.carousel').carousel();
setInterval(function() {
$('.carousel').carousel('next');
}, 2000); // every 2 seconds
回答by Nestor Segura
I had the same problem and I implement the same solution like you. I just added an other functionnality to restart the interval after clicking on the right or left arrow (button).
我有同样的问题，我和你一样实施了同样的解决方案。我刚刚添加了另一个功能来在单击向右或向左箭头（按钮）后重新启动间隔。
My right arrow has the class .fa-angle-right(fontawsome) and the left .fa-angle-left.
我的右箭头有类 .fa-angle-right(fontawsome) 和左边的 .fa-angle-left。
So My Carousel Call function looks like this:
所以我的 Carousel Call 函数看起来像这样：
$('.carousel').carousel({
full_width: true,
time_constant: 100
});
var carouselAutoplay = setInterval(function() {
$('.fa-angle-right').click();
}, 7000);
$('.fa-angle-right').click(function() {
$('.carousel').carousel('next');
clearInterval(carouselAutoplay);
carouselAutoplay = setInterval(function() {
$('.fa-angle-right').click();
}, 7000);
});
$('.fa-angle-left').click(function() {
$('.carousel').carousel('prev');
clearInterval(carouselAutoplay);
carouselAutoplay = setInterval(function() {
$('.fa-angle-right').click();
}, 7000);
});
回答by Hugo Gutierrez
I resolved the problem with this code:
我用这段代码解决了这个问题：
$('.carousel.carousel-slider').carousel({
fullWidth: true,
padding: 200
}, setTimeout(autoplay, 4500));
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
回答by Aldric
You can just listen to carousel onCycleToevent then reset/enabled the autoplay like this :
您可以只收听 carousel onCycleTo事件，然后像这样重置/启用自动播放：
var carousel = jQuery('div#home-carousel');
carousel.carousel({
fullWidth: true,
indicators: true,
duration: 300,
onCycleTo : function($current_item, dragged) {
console.log($current_item);
stopAutoplay();
startAutoplay(carousel);
}
});
var autoplay_id;
function startAutoplay($carousel) {
autoplay_id = setInterval(function() {
$carousel.carousel('next');
}, 5000); // every 5 seconds
//console.log("starting autoplay");
}
function stopAutoplay() {
if(autoplay_id) {
clearInterval(autoplay_id);
//console.log("stoping autoplay");
}
}回答by Trez Treiz
You could also prevent the carousel from sliding if the user is hovering it :
如果用户将其悬停，您还可以防止轮播滑动：
$('.carousel.carousel-slider').carousel({fullWidth: true,indicators: true});
var autoplay = true;
setInterval(function() { if(autoplay) $('.carousel.carousel-slider').carousel('next'); }, 4500);
$('.carousel.carousel-slider').hover(function(){ autoplay = false; },function(){ autoplay = true; });
回答by Sunil Garg
I am using materialize-csswith Angular. And this is what I did to make it autoplay
我正在将materialize-css与Angular 一起使用。这就是我为让它自动播放所做的
let iCarousel = new M.Carousel(this.elCarousel.nativeElement, {
fullWidth: true,
indicators: true
});
// this did the trick
setInterval(() => {
iCarousel.next();
}, 2000)
回答by Vin S
auto-playwith delay of 4 second .
auto-play延迟 4 秒。
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4000);
}
setTimeout(autoplay, 4000);
