Показать сообщение отдельно
  #10 (permalink)  
Старый 04.10.2017, 10:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

делегирование , индекс элемента, бесконечная карусель
Dilettante_Pro
Igorsrt,
без дополнительного класса active
<!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;
   }

</style>
 <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>

  <script>
 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>


</body>
</html>
Ответить с цитированием