Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Прокрутка индикаторов в карусели 2 (https://javascript.ru/forum/dom-window/71248-prokrutka-indikatorov-v-karuseli-2-a.html)

Igorsrt 04.11.2017 12:32
Прокрутка индикаторов в карусели 2
 
Здравствуйте! Несколько недель назад мне очень помогли на этом форуме. Стояла задача, сделать карусель на 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>

Сейчас я бы хотел добавить еще стрелочки ("вперед" и "назад") в эти индикаторы, т.е. что бы можно было активировать картинку не только непосредственным нажатием на нее, но и прокруткой стрелочками.
Прошу помощи.

рони 04.11.2017 13:23
Igorsrt,
вариант не для ie

<!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 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)
            })
        }
    })
    document.querySelector(".left").addEventListener("click", function(event) {
    event.preventDefault();
    var li = carousel.querySelectorAll("li")[2];
    var event = new Event("click", {bubbles: true, cancelable: true});
    li.dispatchEvent(event) ;
     })
    document.querySelector(".right").addEventListener("click", function(event) {
    event.preventDefault();
    var li = carousel.querySelectorAll("li")[0];
    var event = new Event("click", {bubbles: true, cancelable: true});
    li.dispatchEvent(event) ;
     })

});
  </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>

Igorsrt 04.11.2017 13:45
Огромное спасибо )

рони 04.11.2017 13:48
делегирование стрелок влево вправо
 
Igorsrt,
вариант с общим блоком для карусели и кнопок
<!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 type="text/javascript">

 window.addEventListener("DOMContentLoaded", function() {
    var block = document.querySelector(".carousel-block"),
    carousel = document.querySelector(".carousel-indicators");
    block.addEventListener("click", function(event) {
        var target = event.target, li = carousel.querySelectorAll("li"), selected, elem;
        if (elem = target.closest("li")) {
            selected = [].indexOf.call(li, elem);
        }
        else if (elem = target.closest(".left")) {
        event.preventDefault();selected = 0;
        }
        else if (elem = target.closest(".right")) {
        event.preventDefault();selected = 2;
        };
        if (selected !== void(0)) {
           selected = selected ? --selected : li.length - 1;
            [].forEach.call(li, function(el, i) {
                if (i < selected) carousel.appendChild(el)
            })
        }
    })

});
  </script>

</head>

<body>
<div class="carousel-block">
<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>
</div>

</body>
</html>

Igorsrt 04.11.2017 14:12
только кажется чуть-чуть не правильно... т.е. сам по себе код работает (вперед/назад перепутано - но это я и сам допер как поправить), а вот на сайте вместе с Bootstrap правильно работает только стрелочка "Назад"... (

рони 04.11.2017 14:22
Цитата:
Сообщение от Igorsrt
только стрелочка "Назад"...
потому что две кнопки .right - замените на что-то более уникальное

рони 04.11.2017 14:25
Igorsrt,


document.querySelector(".carousel-control.right").addEventListener("click",

Igorsrt 04.11.2017 14:31
да, Вы правы... еще раз спасибо )


Часовой пояс GMT +3, время: 16:38.