引导轮播指示器循环问题答案

【问题标题】：Bootstrap carousel indicator cycling issue引导轮播指示器循环问题
【发布时间】：2015-09-28 14:50:24
【问题描述】：

我已将 Bootstrap 轮播指示器从单选按钮更改为小的预览缩略图，这导致缩略图在骑车时变得混乱。

不幸的是，我根本不了解 Bootstrap 的默认轮播循环，所以我无法弄清楚我的活动指示器缩略图是如何取代其他的。

如果有人可以帮助我解决这个问题（和/或解释默认的活动指示器循环），我将非常感谢您的帮助！

HTML：

    <ol class="carousel-indicators">
        <li data-target="#homeWineCarousel" data-slide-to="0" class="active">
            <img src="http://taybehwinery.com/images/wine/blanc14.jpg">
        </li>
        <li data-target="#homeWineCarousel" data-slide-to="1">
            <img src="http://taybehwinery.com/images/wine/cabernet13.jpg">
        </li>
        <li data-target="#homeWineCarousel" data-slide-to="2">
            <img src="http://taybehwinery.com/images/wine/merlot13.jpg">
        </li>
        <li data-target="#homeWineCarousel" data-slide-to="3">
            <img src="http://taybehwinery.com/images/wine/syrah13.jpg">
        </li>
    </ol>

    <div class="carousel-inner">
        <div class="item active">
            <a href="blanc14.html"><img src="http://taybehwinery.com/images/wine/blanc14.jpg"></a>
            <div class="carousel-caption"><h3><a href="blanc14.html">Sauvignon Blanc 2014</a></h3></div>
        </div>
        <div class="item">
            <a href="cabernet13.html"><img src="images/wine/cabernet13.jpg"></a>
            <div class="carousel-caption"><h3><a href="cabernet13.html">Cabernet Sauvignon 2013</a></h3></div>
        </div>
        <div class="item">
            <a href="merlot13.html"><img src="images/wine/merlot13.jpg"></a>
            <div class="carousel-caption"><h3><a href="merlot13.html">Merlot 2013</a></h3></div>
        </div>
        <div class="item">
            <a href="syrah13.html"><img src="images/wine/syrah13.jpg"></a>
            <div class="carousel-caption"><h3><a href="syrah13.html">Syrah 2013</a></h3></div>
        </div>
    </div>

    <a class="left carousel-control" href="#homeWineCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#homeWineCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

CSS：

.carousel-indicators li img { 
    display: block; 
    width: 120px; height: auto; 
}
.carousel-indicators {
    position: absolute; 
    width: 100%;
    top: 630px; 
    left: 20px;
    z-index: 5;
    margin: 0;
    list-style: none;
}
.carousel-indicators .active { 
    position: relative;
    top: -230px;
    left: -75px;
}
.carousel-indicators li { 
    width: 80px; height: auto;
}

这是我第一次使用堆栈溢出，所以如果我的问题不清楚，或者您需要更多信息，请告诉我。我知道我的代码可能非常混乱，至少有点荒谬 - 我是初学者，欢迎任何帮助清理问题的建议。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

您需要将<li> 替换为仅图像并将属性放置到图像上，使其看起来像这样：

<img src="http://taybehwinery.com/images/wine/merlot13.jpg" data-target="#myCarousel" data-slide-to="2"/>

我创建了 JSFiddle 以完成以下任务，请查看，然后如果您有任何问题，我会在这里回答。

http://jsfiddle.net/tfthum3t/

【讨论】：