Скрпит работает только для первого 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"
}
}