From 7ed5a75a6acfea967ee373d3be539a9feea4d3f2 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 19 Mar 2020 14:01:01 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=20task02?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 - index.html | 26 +++++++ packages/slider/scripts/slider.js | 119 ++++++++++++++++++++++++++++++ packages/slider/styles/slider.css | 87 ++++++++++++++++++++++ styles/style.css | 3 + 5 files changed, 235 insertions(+), 1 deletion(-) delete mode 100644 README.md create mode 100644 index.html create mode 100644 packages/slider/scripts/slider.js create mode 100644 packages/slider/styles/slider.css create mode 100644 styles/style.css diff --git a/README.md b/README.md deleted file mode 100644 index 52258b5..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# JavaScript diff --git a/index.html b/index.html new file mode 100644 index 0000000..0e64e6b --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + Document + + + + + +
+
+ +
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/packages/slider/scripts/slider.js b/packages/slider/scripts/slider.js new file mode 100644 index 0000000..7b91f6a --- /dev/null +++ b/packages/slider/scripts/slider.js @@ -0,0 +1,119 @@ +document.head.insertAdjacentHTML("afterbegin", ''); + +let slider = document.querySelector('.slider'); + +// Создаем иконку загрузки +let loadIcon = document.createElement('i'); +loadIcon.classList.add('fas', 'fa-spinner', 'fa-spin'); +slider.insertAdjacentElement("afterbegin", loadIcon); + +// Создаем левую стрелку +let leftArrow = document.createElement('i'); +leftArrow.classList.add('fas', 'fa-chevron-circle-left', 'slider-leftArrow'); +slider.insertAdjacentElement("beforeend", leftArrow); + +// Создаем правую стрелку +let rightArrow = document.createElement('i'); +rightArrow.classList.add('fas', 'fa-chevron-circle-right', 'slider-rightArrow'); +slider.insertAdjacentElement("beforeend", rightArrow); + +// Ждем когда весь контент целиком загрузится +window.addEventListener('load', function () { + leftArrow.addEventListener('click', function () { + images.setNextLeftImage(); + }); + + rightArrow.addEventListener('click', function () { + images.setNextRightImage(); + }); + + // Инициализация слайдера + images.init(); + // Скрываем иконку загрузки + hideLoadIcon(loadIcon); +}); + +/** + * Функция скрывает иконку загрузки + * @param {HTMLElement} loadIcon + */ +function hideLoadIcon(loadIcon) { + loadIcon.style.display = "none"; +} + +/** + * Функция берет у элемента слайдера его data-атрибуты размеров, + * и если они определены, то самому слайдеру меняет размеры. + * @param {HTMLDivElement} slider + */ +function setSizes(slider) { + let width = slider.getAttribute("data-width"); + let height = slider.getAttribute("data-height"); + if (width !== null && width !== "") { + slider.style.width = width; + } + if (height !== null && height !== "") { + slider.style.height = height; + } +} +setSizes(slider); + +// Объект слайдера +let images = { + /* {int} Номер текущего изображения */ + currentIdx: 0, + + /* {HTMLDivElement[]} slides элементы слайдов */ + slides: [], + + /** Получаем все слайды и показываем первый слайд. */ + init() { + this.slides = document.querySelectorAll('.slider-item'); + this.showImageWithCurrentIdx(); + }, + + /** Берем слайд с текущим индексом и убираем у него класс + * hidden-slide. */ + showImageWithCurrentIdx() { + this.slides[this.currentIdx].classList.remove('hidden-slide'); + }, + + /** Всем слайдам добавляем класс hidden-slide. */ + hideVisibleImages() { + this.slides.forEach(function (slide) { + slide.classList.add('hidden-slide'); + }); + }, + + /** Переключиться на предыдущее изображение. */ + setNextLeftImage() { + this.hideVisibleImages(); + if (this.currentIdx == 0) { + this.currentIdx = this.slides.length - 1; + } else { + this.currentIdx--; + } + const currentSlide = this.slides[this.currentIdx]; + currentSlide.classList.add('slider-rightToLeftAnimation'); + currentSlide.classList.remove('hidden-slide'); + setTimeout(() => { + currentSlide.classList.remove('slider-rightToLeftAnimation'); + }, 500); + }, + + /** Переключиться на следующее изображение. */ + setNextRightImage() { + this.hideVisibleImages(); + if (this.currentIdx == this.slides.length - 1) { + this.currentIdx = 0; + } else { + this.currentIdx++; + } + const currentSlide = this.slides[this.currentIdx]; + currentSlide.classList.add('slider-leftToRightAnimation'); + currentSlide.classList.remove('hidden-slide'); + setTimeout(() => { + currentSlide.classList.remove('slider-leftToRightAnimation'); + }, 500); + }, +} diff --git a/packages/slider/styles/slider.css b/packages/slider/styles/slider.css new file mode 100644 index 0000000..84f0264 --- /dev/null +++ b/packages/slider/styles/slider.css @@ -0,0 +1,87 @@ +.slider { + height: 100vh; + position: relative; + overflow: hidden; +} + +.slider-item { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 1; +} + +.hidden-slide { + visibility: hidden; +} + +.fas.fa-spinner.fa-spin { + font-size: 50px; + color: #bbbbbb; + position: absolute; + left: calc(50% - 25px); + top: calc(50% - 25px); +} + +.slider-item img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +.slider-leftArrow, .slider-rightArrow { + position: absolute; + top: 47%; + z-index: 3; + color: #bbbbbb; + cursor: pointer; + font-size: 50px; +} + +.slider-leftArrow { + left: 5%; +} + +.slider-rightArrow { + right: 5%; +} + +/* animation */ + +.slider-leftToRightAnimation{ + animation-name: leftToRight; + animation-iteration-count: 1; + animation-duration: 0.5s; + position: relative; +} + +@keyframes leftToRight{ + from{ + left: -100%; + } + to{ + left: 0; + } +} + +.slider-rightToLeftAnimation{ + animation-name: rightToLeft; + animation-iteration-count: 1; + animation-duration: 0.5s; + position: relative; +} + +@keyframes rightToLeft{ + from{ + left: 100%; + } + to{ + left: 0; + } +} + + + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..4e41b69 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} \ No newline at end of file