Карусель - Как проложить элементы?

Question

Я пытаюсь выяснить, как циклически перебирать каждый элемент списка по одному и применять к ним функцию, когда они запускаются, я пробовал несколько методов, и некоторые подсказки помогли бы!

HTML структура

<div class="custom-item"> 
    <ul> 
    <li id="first-slide" class="slide active"><h1>Test</h1></li> 
    <li id="second-slide" class="slide"><h1>Test</h1></li> 
    <li id="third-slide" class="slide"><h1>Test</h1></li> 
    </ul> 
</div> 

Я выработал each функции, если я правильно понял будет обрабатывать изменение классов, это когда я не в петлю через каждый элемент.

$(document).ready(function() { 
    $(".slide").each(function(i) { 
    if (this.className !== "active") { 
     this.addClass("active"); 
    } else { 
     this.removeClass("active"); 
    } 
    }); 
}); 

Answer 1

Вы должны использовать $ (это) .hasClass для проверки "активного" класса.

JSFiddle

http://jsfiddle.net/39o0bagv/

JavaScript

$(document).ready(function() { 
      $(".slide").each(function(i) { 
       if ($(this).hasClass("active")) { 
        $(this).removeClass('active'); 
        $(this).addClass("changed"); 
       } else { 
        $(this).addClass("active"); 
       } 
      }); 
     }); 

CSS

.active { 
    color: red; 
} 
.changed { 
    color: blue; 
} 

Цикл проверяет, имеет ли элемент активный класс и заменит его на «изменен». И наоборот.

Answer 2

Я добавил класс css, чтобы вы могли видеть активный класс, который переключается. Ваши методы проверки, добавления и удаления класса не записывались, поэтому он не выполнял ошибку скрипта. Посмотрите, что я сделал ниже, используя свойство classList. Однако, судя по заголовку вашего сообщения, я не уверен, может быть, вы хотите сделать паузу на каждом, а затем продолжить. В этом случае метод javascript setInterval может быть инструментом, который вы хотите. http://www.w3schools.com/jsref/met_win_setinterval.asp

$(document).ready(function() { 
 
      $(".custom-item").find('.slide').each(function(){ 
 
       if (!this.classList.contains("active")) { 
 
        this.classList.add("active"); 
 
       } else { 
 
        this.classList.remove("active"); 
 
       } 
 
      }); 
 
     });

.active{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-item"> 
 
     <ul> 
 
      <li id="first-slide" class="slide active"><h1>Test</h1></li> 
 
      <li id="second-slide" class="slide"><h1>Test</h1></li> 
 
      <li id="third-slide" class="slide"><h1>Test</h1></li> 
 
     </ul> 
 
    </div>

Fiddle

Answer 3

Fix: fiddle

$(document).ready(function() { 

      $('.slide').each(function(i) { 
       if (!$(this).hasClass("active")) { 
        $(this).addClass("active"); 
       } else { 
        $(this).removeClass("active"); 
       } 
      }); 
     });