Bootstrap Carousel 仅在悬停时转换

Posted 2023-05-08

【中文标题】Bootstrap Carousel 仅在悬停时转换

【英文标题】：Bootstrap Carousel transition ON hover only

【发布时间】：2016-08-03 22:51:42

【问题描述】：

这个想法是一个静态图像，但是等等......它不是一个静态图像，它只是一个不会移动的幻灯片，所以你认为它是一个静态图像。但是然后你将鼠标悬停在它上面，它就开始移动了！我在网上的几个地方看过它，很喜欢它的效果，但无法让引导程序模仿它。

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

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" >
        </div>
        <div class="item ">
            <img src="images/image2.jpg" >
        </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
    )
);

【问题讨论】：

您可以参考：jsfiddle.net/hibbard_eu/GArs3如果您有其他解决方案，请发布，因为我也在寻找相同的，并得到了上述链接。

【参考方案1】：

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

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

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

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

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

还有

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

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