final

style.css

@@ -0,0 +1,37 @@
+.container  {
+    width: 100%;
+}
+
+section {
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px dashed #444;
+}
+
+.block {
+    width: 75px;
+    height: 75px;
+    margin: 25px;
+    border: 2px solid #333;
+}
+
+.active {
+    background: orange;
+}
+
+.hide {
+    display: none;
+}
+
+.img-12-min {
+    width: 64px;
+}
+
+.img-12-max {
+    width: 128px;    border: 3px solid #fff;
+
+}
+
+.active-img {
+    border: 3px solid black;
+}

unit_21.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://unpkg.com/mustard-ui@latest/dist/css/mustard-ui.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>Unit 20</title>
+</head>
+
+<body>
+    <div class="container">
+        <section>
+            <div class="wrap-12">
+                <img src="img/1.png" data-text="Картинка 1" alt="#" class="img-12-min active-img">
+                <img src="img/2.png" data-text="Картинка 2" alt="#" class="img-12-min">
+                <img src="img/3.png" data-text="Картинка 3" alt="#" class="img-12-min">
+                <img src="img/4.png" data-text="Картинка 4" alt="#" class="img-12-min">
+                <img src="img/5.png" data-text="Картинка 5" alt="#" class="img-12-min">
+                <img src="img/6.png" data-text="Картинка 6" alt="#" class="img-12-min">
+            </div>
+            <div class="div-12-max">
+                <img src="img/1.png" alt="#" class="img-12-max">
+            </div>
+            <p class="img-12-text">Картинка 1</p>
+            <button class="button-primary prev">Prev</button>
+            <button class="button-primary next">Next</button>
+            <button class="button-primary reset">Reset</button>
+            <div class="out-11">
+            </div>
+        </section>
+
+
+
+    </div>
+
+    <script src="unit_21.js"></script>
+</body>
+
+</html>

unit_21.js

@@ -0,0 +1,81 @@
+function imgSlider() {
+    const a = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png'],
+          images = document.querySelectorAll('.img-12-min'),
+          dataText = [];
+    let currImg = '0';
+
+
+    function pushDataText() {
+        images.forEach(img => {
+            let textAttr = img.getAttribute('data-text');
+            dataText.push(textAttr);
+        });
+    }
+    pushDataText();
+
+    function showMax() {
+        images.forEach((img, i) => {
+            img.addEventListener('click', () => {
+                images.forEach(img => img.classList.remove('active-img'));
+               
+                img.classList.add('active-img');
+                currImg = i;
+                
+                // вывод активной картинки
+                document.querySelector('.div-12-max').innerHTML = `<img src="img/${a[i]}" alt="#" class="img-12-max">`;
+                // вывод текста активной картинки
+                document.querySelector('.img-12-text').innerHTML = dataText[i];
+            });
+        });
+    }
+
+    function slidePrev() {
+        currImg = parseInt(currImg);
+
+        if (currImg <= a.length && currImg >= 1) {
+            currImg--;
+            images.forEach(img => img.classList.remove('active-img'));
+            images[currImg].classList.add('active-img');  
+
+            // вывод активной картинки
+            document.querySelector('.div-12-max').innerHTML = `<img src="img/${a[currImg]}" alt="#" class="img-12-max">`;
+            // вывод текста активной картинки
+            document.querySelector('.img-12-text').innerHTML = dataText[currImg];
+        }  
+    }
+
+    function slideNext() {
+        currImg = parseInt(currImg);
+        if (currImg <= a.length - 2) {
+            currImg++;
+            images.forEach(img => img.classList.remove('active-img'));
+            images[currImg].classList.add('active-img');
+
+            // вывод активной картинки
+            document.querySelector('.div-12-max').innerHTML = `<img src="img/${a[currImg]}" alt="#" class="img-12-max">`;
+            // вывод текста активной картинки
+            document.querySelector('.img-12-text').innerHTML = dataText[currImg];
+        }
+    }
+
+    function resetSlider() {
+        currImg = parseInt(currImg);
+
+        currImg = 0;
+        images.forEach(img => img.classList.remove('active-img'));
+        images[currImg].classList.add('active-img');
+
+        // вывод активной картинки
+        document.querySelector('.div-12-max').innerHTML = `<img src="img/${a[currImg]}" alt="#" class="img-12-max">`;
+        // вывод текста активной картинки
+        document.querySelector('.img-12-text').innerHTML = dataText[currImg];
+    }
+
+    showMax();
+    document.querySelector('.prev').onclick = slidePrev;
+    document.querySelector('.next').onclick = slideNext;
+    document.querySelector('.reset').onclick = resetSlider;
+}
+imgSlider();
+
+