|
@@ -0,0 +1,135 @@
|
|
|
+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");
|
|
|
+}
|