2015-07-10 58 views
1

我已將Bootstrap旋轉木馬指示符從單選按鈕更改爲小型預覽縮略圖,導致縮略圖在騎車時變得混亂起來。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; 
} 

這是使用堆棧溢出,所以如果我的問題是不清楚的,或者你需要更多信息,我的第一次,請您讓我知道。我知道我的代碼可能很雜亂,至少有點荒謬 - 我是初學者,歡迎提供任何幫助清理問題的建議。

回答

0

您將需要只有圖像替換<li>並將屬性上的圖像,這樣它看起來就像這樣:

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

我創建的jsfiddle具有以下任務的工作,請查閱然後如果您之後有任何問題,我會在這裏回答他們。

http://jsfiddle.net/tfthum3t/