Bootstrap 引导转盘转换仅悬停在ON

68de4m5k  于 2023-06-04  发布在  Bootstrap
关注(0)|答案(1)|浏览(210)

这个想法是一个静态的图像,但等待。。它不是一个静态图像,它只是一个不动的幻灯片,所以你认为它是一个静态图像。但是当你把鼠标悬停在它上面时,它就开始移动了!我在网上看到过它,很喜欢它的效果,但不能让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
    })
});
envsm3lx

envsm3lx1#

这种循环和暂停取决于两件事。
当鼠标进入时(mouseenter -暂停滑动)当鼠标离开时(mouseleave -继续滑动)
只需更改js/bootstrap.js文件中的以下代码行,以允许连续滑动。

.on('mouseenter', $.proxy(this.**pause**, this))
  • 为了 *
.on('mouseenter', $.proxy(this.**cycle**, this))

然后呢

.on('mouseleave', $.proxy(this.**cycle**, this))
  • 为了 *
.on('mouseleave', $.proxy(this.**pause**, this))

相关问题