Здравствуйте! Несколько недель назад мне очень помогли на этом форуме. Стояла задача, сделать карусель на Bootstrap с индикаторами в виде миниатюр, и что бы активный индикатор всегда был вторым по счету - т.е. при нажатии на индикатор, они прокручивались так что бы активный индикатор стал вторым (ну и соответственно индикаторы должны быть зациклены). Вот итоговый рабочий код индикаторов:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
li { display:inline }
li:nth-child(2) img{
border: 2px solid #FF0033;
}
li:nth-child(4) ~ li{
display: none;
}
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var carousel = document.querySelector(".carousel-indicators");
carousel.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest("li")) {
var li = carousel.querySelectorAll("li");
var selected = [].indexOf.call(li, target);
selected = selected ? --selected : li.length - 1;
[].forEach.call(li, function(el, i) {
if (i < selected) carousel.appendChild(el)
})
}
})
});
</script>
</head>
<body>
<ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block">
<li data-target="#carousel-custom" data-slide-to="0" class="">
<img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="1" class="">
<img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="2" class="">
<img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="3" class="">
<img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="4" class="">
<img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="5" class="">
<img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="6" class="">
<img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="7" class="">
<img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive">
</li>
<li data-target="#carousel-custom" data-slide-to="8" class="">
<img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive">
</li>
</ol>
<!-- а здесь я хочу добавить стрелочки -->
<a class="left carousel-control" href="#carousel-custom" role="button" data-slide="prev">Назад
<i class="fa fa-chevron-left"></i>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#carousel-custom" role="button" data-slide="next">Вперед
<i class="fa fa-chevron-right"></i>
<span class="sr-only"></span>
</a>
</body>
</html>
Сейчас я бы хотел добавить еще стрелочки ("вперед" и "назад") в эти индикаторы, т.е. что бы можно было активировать картинку не только непосредственным нажатием на нее, но и прокруткой стрелочками.
Прошу помощи.