(CSS-Javascript-JQuery) Как сделать слайдер миниатюр для карусели?

Question

Я пытаюсь сделать карусель с эскизами навигации. Что-то вроде this Carousel Из-за того, что я не знаю, сколько эскизов будет, это должно быть что-то вроде слайдера с предыдущими и последующими кнопками. Я пробовал с неупорядоченным списком, но показан только первый ли. Что не так с этим кодом?

Вот мой код:

.carousel { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 600px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 
.carousel img.main 
 
.previous { 
 
    position: absolute; 
 
    left: 0px; 
 
    height: 100%; 
 
    width: 30px; 
 
    opacity: 0; 
 
    background-color: lightblue; 
 
} 
 
.previous:hover { 
 
    opacity: 0.5; 
 
} 
 
.next { 
 
    position: absolute; 
 
    right: 0px; 
 
    height: 100%; 
 
    width: 30px; 
 
    opacity: 0; 
 
    background-color: lightblue; 
 
} 
 
.next:hover { 
 
    opacity: 0.5; 
 
} 
 
.thumbnavigator { 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    height: 60px; 
 
    width: 100%; 
 
    opacity: 0; 
 
    background-color: purple; 
 
} 
 
.thumbnavigator:hover { 
 
    opacity: 0.5; 
 
} 
 
.thumbnavigator img { 
 
    height: 60px; 
 
    width: auto; 
 
} 
 
ul li { 
 
    list-style-type: none; 
 
    display: inline; 
 
}

<div class="carousel"> 
 
    <img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" /> 
 

 
    <div class="previous"> 
 
    </div> 
 

 
    <div class="next"> 
 
    </div> 
 

 
    <div class="thumbnavigator"> 
 
    <!-- Thumbnails list slider --> 
 
     <ul> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
    <li> 
 
    <img src = "http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /> 
 
    </li> 
 
</ul> 
 
    </div> 
 
</div>

Answer 1

Проблема заключается в следующем правиле CSS:

.carousel img { 
    position: absolute; 
    width: 100%; 
    height: auto; 
} 

Это затронет как основное изображение, и каждый эскиз, в результате во всех эскизах, уложенных друг на друга, из-за position:absolute.

Простое изменение селектора от .carousel img до .carousel img.main устранит проблему.

Кроме того, ваши HTML-теги не закрыты должным образом. Ниже приведен скорректированный HTML.

<div class="carousel"> 
    <img class="main" src="http://www.car-magazine.it/wp-content/uploads/2014/12/Ferrari-Sergio3_4antSX.jpg" /> 

    <div class="previous"></div> 
    <div class="next"></div> 

    <div class="thumbnavigator"> 
     <ul> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
      <li><img src="http://www.ferrariofontario.com/wp-content/uploads/2014/07/La_Ferrari.jpg" /></li> 
     </ul> 
    </div> 
</div>