twitter bootstrap carousel - 鼠标悬停上的幻灯片图像,直到mouseout

Question

我正在使用twitter bootstrap carousel来显示在我的页面上滑动的图像.它工作得很好.

而不是在鼠标点击时滑动图像,我希望当我将鼠标悬停在箭头上时图像会滑动.我做了一个改变,它的工作原理(如下图所示).

boostrap-carousel.js,第193行$(文件).on('mouseover.carousel.data-api','[data-slide],[data-slide-to]',function(e)

但问题是 - 我希望图像一直滑动,直到鼠标悬停在箭头上并在我移开鼠标时停止滑动.

你能帮我么？

Answer 1

而不是改变bootstrap-carousel.js你可以使用Javascript/jQuery来控制轮播.延迟/定时器可用于重复鼠标悬停功能,触发旋转木马控件的正常左/右功能.

$('#myCarousel').carousel({interval:false}); /* init the carousel but don't start it */
var myInterval=false;
$('.carousel-control').mouseover(function() {
    var ctrl = $(this);
    var interval=300;

    myInterval = setInterval(function(){
         ctrl.trigger("click");
    },interval);
});

$('.carousel-control').mouseout(function(){
    clearInterval(myInterval);
    myInterval = false;
});

关于Bootply的工作演示:http://bootply.com/Gyfhc2kCwd