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

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

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

boostrap-carousel.js,第193行
$(document).on(‘mouSEOver.carousel.data-api’,'[data-slide],[data-slide-to]’,function(e)

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

你能帮我么？

解决方法

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

$('#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