GoTemplate/assets/js/carousel.js

let carouselWidth, carousel;

+function init() {
	let carouselRoot = document.createElement('div');
	carouselRoot.classList.add('root');

	carousel = document.querySelector("#Carousel");

	try {
		carouselWidth = Number(carousel.dataset.width);
	} catch (err) {
		console.log("%c ERROR ", "background-color:red;color:white;", err);
		carouselWidth = 600;
	}

	carousel.style.width = `${carouselWidth}px`;
	carousel.parentElement.append(carouselRoot);
	carouselRoot.append(carousel);

	if (carousel && carousel.children) {
		let inner = document.createElement('div'),
			index = 0;

		let images = carousel.querySelectorAll("[data-image]");

		for (let image of images) {
			let img = document.createElement("img");
			img.src = image.dataset.image;
			img.style.width = `${carouselWidth}px`;
			img.dataset.index = index++;
			inner.append(img);
		}
		inner.classList.add('inner', 'loaded');

		while (carousel.children.length > 0) {
			carousel.children[0].remove();
		}

		carousel.append(inner);

		let nextImage = function () {
			inner.style.transition = `left 200ms ease 0s`;
			inner.style.left = `-${carouselWidth * 2}px`;

			try {
				setDots(Number(inner.children[2].dataset.index));
			} catch (err) {
				console.log("%c ERROR ", "background-color:red;color:white;", err);
			}

			setTimeout(function (e, w) {
				e.style.transition = 'none';

				e.append(e.firstElementChild);

				e.style.left = `-${w}px`;
			}, 200, inner, carouselWidth);
		};

		let interval = setInterval(function () {
			if (inner.clientHeight != 0) {
				carousel.style.height = `${inner.clientHeight}px`;
				inner.style.position = 'absolute';
				inner.style.left = `-${carouselWidth}px`;
				inner.classList.remove('loaded');

				clearInterval(interval);
			}
		}, 100);

		let autoInterval = setInterval(nextImage, 5000);

		// Кнопки переключения
		let left = document.createElement('div'),
			right = document.createElement('div');

		left.classList.add('left');
		right.classList.add('right');

		left.addEventListener('click', function () {
			inner.style.transition = `left 200ms ease 0s`;
			inner.style.left = `0px`;

			try {
				setDots(Number(inner.children[0].dataset.index));
			} catch (err) {
				console.log("%c ERROR ", "background-color:red;color:white;", err);
			}

			setTimeout(function (e, w) {
				e.style.transition = 'none';

				e.prepend(e.lastElementChild);

				e.style.left = `-${w}px`;
			}, 200, inner, carouselWidth);

			clearInterval(autoInterval);
			autoInterval = setInterval(nextImage, 5000);
		});
		right.addEventListener('click', function () {
			nextImage();
			clearInterval(autoInterval);
			autoInterval = setInterval(nextImage, 5000);
		});

		carousel.append(left, right);

		if ("dots" in carousel.dataset && carousel.dataset.dots == "true") {
			// Навигационные точки
			// Размер одной точки 30x30px
			// Если ширина карусели меньше чем КоличествоКартинок * 30, тогда точки не показывать
			if (images.length * 30 < carouselWidth) {
				let dots = document.createElement('div');
				for (let i = 0; i < images.length; i++) {
					let dot = document.createElement('div');
					dot.classList.add('dot');
					dots.append(dot);
				}
				dots.classList.add('dots');
				dots.children[1].classList.add('active');
				carouselRoot.append(dots);
			}
		}
	}
}();

function setDots(index) {
	let activeDots = document.querySelectorAll(".dots > .dot.active");
	for (let ad of activeDots) {
		ad.classList.remove('active');
	}
	let dots = document.querySelector(".dots");
	dots.children[index].classList.add("active");
}