Тест-драйв для карусели Bootstrap

Question

Я изменил индикаторы карусели 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; 
} 

Это мой первый раз, используя переполнение стека, так что, если мой вопрос остается неясным, или вам нужна дополнительная информация, пожалуйста, дайте мне знать, , Я знаю, что мой код, вероятно, довольно грязный и, по крайней мере, немного бессмыслен - я новичок и приветствую любые предложения, чтобы помочь очистить вещи.

Answer 1

Вам нужно будет заменить <li> только изображения и поместить атрибуты на изображение таким образом это будет выглядеть следующим образом:

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

Я создал JSFiddle со следующей рабочей задачи, пожалуйста, просмотрите и затем если у вас возникнут какие-либо вопросы, я буду здесь, чтобы ответить на них.

http://jsfiddle.net/tfthum3t/