Пробую написать декоративный слайдер, который будет переключать список маленьких картинок в заголовке секции. Количество картинок может менятся.
function moveSlide() {
/*тут я определяю массив со слайдами*/
var containerNum = $('.slide-1 .slider .slide');
/*тут я определяю длину массива со слайдами*/
var countVar = containerNum.length;
/*тут я определяю какой-же из слайдов активный*/
var activeVar = containerNum.closest('.active');
/*запускаю бесконечный цыкл, который считает слайды по очереди*/
while (true) {
for (var i = 0; i < countVar; i++) {
containerNum.eq(i).addClass("active");
/*класс добавлен элементу И*/
containerNum.eq(i).removeClass("active");
/*класс удален у И-того элемента*/
}
/*Наша песня хороша начинай сначала.*/
if (i == 5) {
i = 0;
}
.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="slider-wrap slide-1">
<div class="slider">
<img class="slide" src="img/slider/1.png">
<img class="slide" src="img/slider/2.png">
<img class="slide" src="img/slider/3.png">
<img class="slide" src="img/slider/4.png">
<img class="slide" src="img/slider/5.png">
</div>
</div>
Цикл летает со скоростью света и вешает браузер.
Что с этим делать - не знаю.
Вот пример:
https://jsfiddle.net/6f14s0tw/1/