Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как сделать прокрутку индикаторов в карусели? (https://javascript.ru/forum/dom-window/70790-kak-sdelat-prokrutku-indikatorov-v-karuseli.html)

Igorsrt 04.10.2017 11:08

ну вот уже совсем "почти что"... )) Спасибо огромное
http://ingraf.su/sila-1c/ - но вот только еще бы автоматическое перелистывание срабатывало (а тут как-раз этот класс active срабатывает, насколько я понимаю)

Dilettante_Pro 04.10.2017 12:41

Igorsrt,
Цитата:

Сообщение от Igorsrt
видимо, потому что у Вас текст, а у меня картинки

замените innerText на innerHTML

Igorsrt 04.10.2017 13:43

не получается (

Dilettante_Pro 04.10.2017 16:36

Немного позаимствовал у рони
<style>
   li { display:inline }
   .active img{ border:1px solid red }
   div { width:700px;
           overlay:hide
   }
</style>
<div>
<ol>
   <li><img src="http://ingraf.su/wp-content/uploads/adecco.jpg" alt="Adecco" class="img-responsive"></li>
   <li class='active'><img src="http://ingraf.su/wp-content/uploads/Rambler.jpg" alt="Rambler" class="img-responsive"></li>
   <li><img src="http://ingraf.su/wp-content/uploads/bel.jpg" alt="Белая птица" class="img-responsive"></li>
   <li><img src="http://ingraf.su/wp-content/uploads/Rusbiteh.jpg" alt="Русбитех" class="img-responsive"></li>
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Tryohgornaya-manufaktura.jpg" alt="Трёхгорная мануфактура" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Moskabelmet.jpg" alt="Москабельмет" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Asteros.jpg" alt="Астерос" class="img-responsive">
            </li>						
   <li>
              <img src="http://ingraf.su/wp-content/uploads/Subaru.jpg" alt="Subaru" class="img-responsive">
            </li>						
    <li>
              <img src="http://ingraf.su/wp-content/uploads/Nestle.jpg" alt="Nestle Waters" class="img-responsive">
    </li>
</ol>
</div>
<script>

  document.querySelector("ol").onclick = function(e){
    var lis = document.querySelectorAll('li');
     var target = event.target;
     if (target = target.closest("li")) {
        var selected = [].indexOf.call(lis,  target ) ;
        if(selected != 1) {
           curr = selected ? selected - 1: lis.length - 1;
           var innerOl = "<li>" + lis[curr].innerHTML + "</li>\n<li class='active'>" + lis[selected].innerHTML + "</li>\n";
          curr++;
          for(var i = 2;i <lis.length;i++) { 
              curr++;
              if(curr >= lis.length) { if(selected==0) curr = 1;
                else curr =0;
              }
              innerOl += "<li>" + lis[curr].innerHTML + "</li>\n";
          }
          this.innerHTML = innerOl;     
      }
   }
};
</script>


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