Скрпит работает только для первого id

введите сюда описание изображения Мне нужно чтобы смена классов current, last и unactive происходила между двумя блоками. А у меня второй блок с id space1 остаётся всегда unactive, а смена классов происходит только в блоке с id space0.

PHP

     function viewImage($index, $text, $img, $style) {
        return "<div id='space" . $index . "' style='background: url(" . $img . ") no-repeat;' class=\"visible " . $style . "\"><p id=\"text" . $index . "\" class=\"description textvisible\">" . $text . "</p></div>";
    }

JS


var Slider = {
    currentItem: function () {
        return document.querySelector(".slider-currentItem");
    },

    nextItem: function () {
        if (unactiveItems.length === 0)
            return null;

        return unactiveItems.shift();
    },

    lastItem: function () {
        return document.querySelector(".slider-lastItem");
    },

    unactiveItems: function () {
        var items = [];
        var nodes = document.querySelectorAll(".slider-unactiveItem");
        nodes.forEach(function(node) {
            items.push(node);
        });
        return items;
    },
    
    tornSlide: function() { 
        if (currentItem) {
            currentItem.classList.remove("slider-currentItem");
            currentItem.classList.add("slider-lastItem");
        }

        lastItem = currentItem;

        currentItem = Slider.nextItem(); 
        console.log(currentItem);
        if (currentItem) {
            currentItem.classList.remove("slider-unactiveItem");
            currentItem.classList.add("slider-currentItem");
        }
    },

    hideLastItem: function() { 
        if (!lastItem)
            return;
            
        lastItem.classList.remove("slider-lastItem");
        lastItem.classList.add("slider-unactiveItem");
        unactiveItems.push(lastItem); 
        lastItem = null;
    },

    timeout: function () { 
        tornCounter++;
        if (tornCounter > 10 && lastItem) {
            Slider.hideLastItem();
        }

        if (tornCounter > 40) { 
            Slider.tornSlide();
            tornCounter = 0;
        }
        
        setTimeout("Slider.timeout()", 100);
    }
};

JSON

{
  "slide_1": {
     "name":"Jeans",
     "picture":"../slider/images/targets/2.jpeg"
  },
  "slide_2": {
     "name":"Men",
     "picture":"../slider/images/targets/3.jpeg"
  }
}


Ответы (0 шт):