在 Bootstrap Carousel 中更改鼠标悬停幻灯片答案

【问题标题】：Changing slides on mouseover in Bootstrap Carousel在 Bootstrap Carousel 中更改鼠标悬停幻灯片
【发布时间】：2016-08-10 11:25:53
【问题描述】：

我的引导轮播上有几个 div，某种导航按钮。

我需要的是在鼠标悬停时更改幻灯片。

喜欢这个网站：magnatek.nichost.ru 和 vnka.ru

如何做到这一点？

提前谢谢你。

【问题讨论】：

显示一些代码，不要只是寻求解决方案。先尝试一下。也许开始阅读与引导滑块相关的文档
有 JSfiddle 吗？
bootply.com/SwVYsZx9dS 鼠标悬停在链接 1,2,3 上应该会改变幻灯片，点击链接 1,2,3 应该像往常一样工作。

标签： javascript html css twitter-bootstrap

【解决方案1】：

HTML

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                 <h4>First Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                 <h4>Second Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
        <div class="item">
            <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
            <div class="carousel-caption">
                 <h4>Third Thumbnail label</h4>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
        </div>
    </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

脚本

$('#myCarousel').carousel({
    interval: false
});

var i;

$('.carousel-control').on("mouseover", function () {
    var control = $(this),
        interval = 500;

    i = setInterval(function () {
        control.trigger("click");
    }, interval);
})
.on("mouseout", function () {
    clearInterval(i);
});

【讨论】：

谢谢，但这不是我要找的。我需要更改鼠标悬停在 div 上的幻灯片，而不是控制箭头。
你只需要更改 jquery $('.carousel-control').on("mouseover", function () { 替换为以下代码 $('.carousel-inner').on( "mouseover", function () { 同时替换 HTML
替换为

【解决方案2】：

你只需要改变 jquery

$('.carousel-control').on("mouseover", function () {
replace with following code
$('.carousel-inner').on("mouseover", function () {

同时替换 HTML

<div class="carousel-inner">
replace with 
<div class="carousel-inner" href="#myCarousel" data-slide="next">

【讨论】：