Bootstrap 仅悬停时轮播过渡

Question

想法是静态图像，但是等等...它不是静态图像，它只是一个不动的幻灯片放映，因此您认为它是静态图像。但是当你将鼠标悬停在它上面时，它就会开始移动！我在网络上的几个地方看到过它，很喜欢它的效果，但无法 bootstrap 模仿它。

我所有的搜索结果都是有人试图让它在悬停时暂停（有人能说文档...），但没有做相反的事情。无论如何，这是基本代码...

HTML ~ 非常精简的幻灯片

<div class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/image1.jpg" alt="Image one">
        </div>
        <div class="item ">
            <img src="images/image2.jpg" alt="Image two">
        </div>
    </div>
</div>

这是 JS

$('.carousel').carousel({
        interval: false, //disable auto scrolling
        pause: false     //prevent pause on hover... we want the opposite
    });

//now I try to change the interval on hover
$('.carousel').hover(function(){
    $(this).carousel({
        interval:1000
    })
});

Answer 1

循环和暂停取决于两件事。

原本当鼠标进入时（mouseenter - 暂停滑动）当鼠标离开时（mouseleave - 恢复滑动）

只需更改 js/bootstrap.js 文件中的以下代码行即可允许连续滑动。

.on('mouseenter', $.proxy(this.pause, this)) to

.on('mouseenter', $.proxy(this.cycle, this))

和

.on('mouseleave', $.proxy(this.cycle, this)) to

.on('mouseleave', $.proxy(this.pause, this))

Bootstrap 仅悬停时轮播过渡

Bootstrap Carousel transition ON hover only

javascript

hover

carousel

twitter-bootstrap

banana