Question

我使用twitter bootstrap carousel来显示在我的页面上滑动的图像。它完美无缺。

当我将鼠标悬停在箭头上时，我想让图像滑动，而不是在鼠标点击时滑动图像。我做了一个改变，它的确有效（如下图所示）。

boostrap-carousel.js，第193行 $（document）.on（'mouseover.carousel.data-api'，'[data-slide]，[data-slide-to]'，function（e）

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

你能帮帮我吗？

Answer 1

您可以使用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

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

1 个答案: