是否有参数使物化旋转木马滑块自动播放?
$('.carousel').carousel();
例如(此参数不起作用):
$('.carousel').carousel({
autoplay: true
});
谢谢!
答案 0 :(得分:25)
我解决了这个问题:
$('.carousel').carousel({
padding: 200
});
autoplay();
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
答案 1 :(得分:16)
尝试像这样执行next
方法
$('.carousel').carousel();
setInterval(function() {
$('.carousel').carousel('next');
}, 2000); // every 2 seconds
答案 2 :(得分:2)
我遇到了同样的问题,我和你一样实施了同样的解决方案。我刚刚添加了另一个功能,在点击向右或向左箭头(按钮)后重新启动间隔。
我的右箭头有类.fa-angle-right(fontawsome)和左.fa-angle-left。
所以我的轮播呼叫功能如下所示:
$('.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);
});
答案 3 :(得分:1)
您可以直接收听轮播 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");
}
}
答案 4 :(得分:0)
如果用户将鼠标悬停在旋转盘上,您还可以防止旋转木马滑动:
$('.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; });
答案 5 :(得分:0)
我在 Angular 中使用 materialize-css 。这就是我要做的自动播放
let iCarousel = new M.Carousel(this.elCarousel.nativeElement, {
fullWidth: true,
indicators: true
});
// this did the trick
setInterval(() => {
iCarousel.next();
}, 2000)
答案 6 :(得分:-1)
我用这段代码解决了这个问题:
$('.carousel.carousel-slider').carousel({
fullWidth: true,
padding: 200
}, setTimeout(autoplay, 4500));
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4500);
}
答案 7 :(得分:-1)
auto-play
延迟4秒。
function autoplay() {
$('.carousel').carousel('next');
setTimeout(autoplay, 4000);
}
setTimeout(autoplay, 4000);