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