AlexN-github · AlexN-github · Mar 19, 2020
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="packages/slider/styles/slider.css">
+    <link rel="stylesheet" href="styles/style.css">
+</head>
+<body>
+
+    <div class="slider" data-width="720px" data-height="480px">
+        <div class="slider-item hidden-slide">
+            <img src="https://placeimg.com/1920/1080/animals" alt="">
+        </div>
+        <div class="slider-item hidden-slide">
+            <img src="https://placeimg.com/1920/1080/tech" alt="">
+        </div>
+        <div class="slider-item hidden-slide">
+            <img src="https://placeimg.com/1920/1080/nature" alt="">
+        </div>
+    </div>
+
+    <script src="packages/slider/scripts/slider.js"></script>
+</body>
+</html>
diff --git a/packages/slider/scripts/slider.js b/packages/slider/scripts/slider.js
@@ -0,0 +1,119 @@
+document.head.insertAdjacentHTML("afterbegin", '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">');
+
+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
@@ -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
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}