document.addEventListener('DOMContentLoaded', function () {
initCarousel();
});
function initCarousel() {
const carouselList = document.querySelector('.cards-carousel__list');
const carouselItems = document.querySelectorAll('.cards-carousel__item');
const elems = Array.prototype.slice.call(carouselItems);
if (!carouselList) {
console.warn('Carousel not found!');
return;
}
carouselList.addEventListener('click', function (event) {
var newActive = event.target;
var isItem = newActive.closest('.cards-carousel__item');
if (!isItem || newActive.classList.contains('cards-carousel__item_active')) {
return;
}
if (event.target.dataset.position == '0' && event.target.dataset.url !== '#') {
window.location.href = event.target.dataset.url;
} else {
update(newActive);
}
});
function update(newActive) {
var newActivePos = newActive.dataset.position;
var current = elems.find(function(elem) {
return elem.dataset.position == 0;
});
var prev = elems.find(function(elem) {
return elem.dataset.position == -1;
});
var next = elems.find(function(elem) {
return elem.dataset.position == 1;
});
var first = elems.find(function(elem) {
return elem.dataset.position == -2;
});
var last = elems.find(function(elem) {
return elem.dataset.position == 2;
});
if (current) {
current.classList.remove('cards-carousel__item_active');
}
[current, prev, next, first, last].forEach(function(item) {
if (item) {
var itemPos = item.dataset.position;
item.dataset.position = getPos(itemPos, newActivePos);
}
});
}
function getPos(current, active) {
var diff = current - active;
if (Math.abs(diff) > 2) {
return -current;
}
return diff;
}
}