2015-07-10 59 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/