add gallery product

src/item.html

@@ -6,4 +6,6 @@
 
 //= template/product-title/index.html
 
+//= template/product-main/index.html
+
 //= template/common/footer.html
\ No newline at end of file

src/js/gallery-slider.js

+'use strict';
+
+(function () {
+    var gallery = document.querySelectorAll('.product__gallery-item');
+    if(gallery.length){
+        gallery.forEach(function (item) {
+            item.addEventListener('click', function () {
+                item.classList.toggle('active');
+            })
+        })
+    }
+    document.addEventListener('DOMContentLoaded', function () {
+        var mySwiperProduct = new Swiper ('.product__gallery', {
+            direction: 'horizontal',
+            slidesPerView: 3,
+            loop: false,
+        });
+    });
+})();
\ No newline at end of file

src/scss/product-main/product-main.scss

+@import "../settings/color";
+.product__main{
+  display: flex;
+  justify-content: space-between;
+}
+
+.product__main-bl{
+  width: 33%;
+}
+
+.product__grey-title{
+  background: $grey-product;
+  padding: 12px;
+  font-weight: bold;
+  color: rgba(black, .8);
+}
+
+.product__main-image{
+  margin: 0 7px;
+  img{
+    width: 100%;
+  }
+}
+.product__gallery{
+  overflow: hidden;
+}
+.product__gallery-list{
+  padding-left: 0;
+  list-style-type: none;
+  display: flex;
+  justify-content: space-between;
+}
+.product__gallery-item{
+  width: 33%;
+  height: 124px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid white;
+  img{
+    width: 100%;
+  }
+}
+.product__gallery-item.active{
+  border: 1px solid black;
+}

src/scss/settings/color.scss

@@ -7,3 +7,4 @@ $grey-text: #727272;
 $footer: #333333;
 $bg-slider: #c4c4c4;
 $dark-text: #323232;
+$grey-product: #dfdfdf;
\ No newline at end of file

src/template/product-main/index.html

+<div class="wrapper product__main">
+    <div class="product__main-bl product__main-gallery">
+        <div class="product__gallery-title product__grey-title">Фото</div>
+        <div class="product__gallery">
+            <ul class="product__gallery-list swiper-wrapper">
+                <li class="product__gallery-item swiper-slide">
+                    <img src="img/galley-item.png">
+                </li>
+                <li class="product__gallery-item swiper-slide">
+                    <img src="img/galley-item.png">
+                </li>
+                <li class="product__gallery-item swiper-slide">
+                    <img src="img/galley-item.png">
+                </li>
+                <li class="product__gallery-item swiper-slide">
+                    <img src="img/galley-item.png">
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="product__main-bl product__main-image">
+        <img src="img/product-main.png" alt="Товар">
+    </div>
+    <div class="product__main-bl">
+        <div class="product__dop-title product__grey-title">Навесное оборудование</div>
+    </div>
+</div>
\ No newline at end of file