Add hover and catalog

src/catalog.html

+//= template/common/header.html
+
+//= template/menu-list-catalog/index.html
+
+
+//= template/common/footer.html
\ No newline at end of file

src/js/main-list.js

+'use strict';
+
+(function () {
+    var checkActive = function (list, elem) {
+        list.forEach(function (item) {
+            console.log('Here!');
+            if(item !== elem){
+                if(item.classList.contains('active')){
+                    item.classList.remove('active');
+                }
+            }
+        })
+    };
+
+    var tabs = document.querySelector('.menu-list__mainpage');
+    if(tabs) {
+        var tab = tabs.querySelectorAll('.menu-list__link');
+        tab.forEach(function (item, index) {
+            item.addEventListener('click', function (evt) {
+                checkActive(tab, item);
+                if(item.classList.contains('active')){
+
+                }else {
+                    evt.preventDefault();
+                    item.classList.toggle('active');
+                    var productSlider = document.querySelectorAll('.product-slider__wrapper');
+                    productSlider[index].classList.add('active');
+                    checkActive(productSlider, productSlider[index]);
+
+                }
+            })
+        })
+    }
+})();
\ No newline at end of file

src/js/main-slider.js

@@ -9,6 +9,10 @@
                 delay: 3000,
                 grabCursor: true
             },
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true
+            }
         });
     });
 })();
\ No newline at end of file

src/scss/common/header/header-nav.scss

@@ -12,6 +12,12 @@
   justify-content: space-between;
 }
 
+.nav__item:hover{
+  .nav__link{
+    font-weight: bold;
+  }
+}
+
 
 .nav__link{
   text-decoration: none;

src/scss/link-list-red/link-list-red.scss

@@ -45,4 +45,17 @@
   height: 35px;
   fill: $white-text;
   margin-right: 15px;
+  transition: .2s;
+}
+
+.link-list-red__text{
+  transition: .2s;
+}
+.link-list-red__link:hover{
+  .link-list-red__text{
+    transform: translateY(-4px);
+  }
+  .link-list-red__ico{
+    transform: translateY(-4px);
+  }
 }
\ No newline at end of file

src/scss/main-slider/main-slider-common.scss

@@ -4,3 +4,29 @@
   background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.65) 35%, #232021 80%, #232021 100%),url("/img/background-min.jpg")no-repeat;
   background-size: cover;
 }
+
+.main-slider__wrapper{
+  .swiper-pagination-bullet{
+    position: relative;
+    width: 15px;
+    height: 15px;
+    background: $white-text;
+    border: 1px solid $grey-text;
+    opacity: 1;
+  }
+  .swiper-pagination-bullet-active{
+    &:after{
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-55%, -55%);
+      background: $red-color;
+    }
+  }
+}
+

src/scss/menu-list/menu-list-main.scss

 @import "../settings/color";
-.menu-list{
+
+.menu-list {
   background: $menu-list;
 }
-.menu-list__wrapper{
+
+.menu-list__wrapper {
   padding: 0 20px;
 }
 
-.menu-list__list{
+.menu-list__list {
   display: flex;
   list-style-type: none;
   padding-left: 0;
@@ -14,9 +16,10 @@
   justify-content: space-between;
 }
 
-.menu-list__item{
+.menu-list__item {
   position: relative;
-  &:after{
+
+  &:after {
     content: "";
     display: inline-block;
     position: absolute;
@@ -27,15 +30,16 @@
     height: 100%;
     background: rgba($white-text, .6);
   }
-  &:last-child{
-    &:after{
+
+  &:last-child {
+    &:after {
       content: "";
       display: none;
     }
   }
 }
 
-.menu-list__link{
+.menu-list__link {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -43,7 +47,12 @@
   color: $white-text;
   padding: 10px 20px 20px;
   transition: .2s;
-  &:hover{
-    background: $red-color;
+
+  &:hover {
+    background: rgba($red-color, .8);
   }
 }
+
+.menu-list__link.active{
+  background: $red-color;
+}
\ No newline at end of file

src/scss/product-slider/product-slider.scss

@@ -3,10 +3,21 @@
   padding: 45px 0;
 }
 .product-slider__wrapper{
+  visibility: hidden;
+  opacity: 0;
+  height: 0;
+  width: 0;
+  position: relative;
+}
+
+.product-slider__wrapper.active{
   display: flex;
   align-items: center;
   flex-direction: column;
-  position: relative;
+  visibility: visible;
+  opacity: 1;
+  height: auto;
+  width: 1170px;
 }
 
 .product-slider__content{
@@ -24,6 +35,7 @@
   width: 225px;
   height: 225px;
   position: relative;
+  cursor: pointer;
 }
 
 .product-slider__bg{
@@ -34,6 +46,7 @@
   top: 0;
   left: 0;
   margin-left: 25px;
+  transition: .2s;
 }
 
 .product-slider__model{
@@ -50,4 +63,16 @@
   bottom: 0;
   left: 0;
   max-width: 100%;
+  width: 276px;
+  transition: .2s;
+}
+
+.product-slider__item:hover{
+  .product-slider__bg{
+    background: $red-color;
+    transform: translateY(-10px);
+  }
+  .product-slider__img{
+    transform: translateY(-10px);
+  }
 }
\ No newline at end of file

src/template/main-slider/index.html

@@ -3,7 +3,9 @@
         <div class="slider__main swiper-container">
             <div class="swiper-wrapper">
                 <div class="slider__main-item swiper-slide"><a href="#"><img src="img/slide.jpg"></a></div>
+                <div class="slider__main-item swiper-slide"><a href="#"><img src="img/slide.jpg"></a></div>
             </div>
+            <div class="swiper-pagination"></div>
         </div>
     </div>
 </div>
\ No newline at end of file

src/template/menu-list-catalog/index.html

+<div class="menu-list">
+    <div class="wrapper menu-list__wrapper">
+        <ul class="menu-list__list">
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link active">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+            <li class="menu-list__item">
+                <a href="#" class="menu-list__link">
+                    <img src="img/icon-test.png" alt="" class="menu-list__ico">
+                    <p class="menu-list__tit">Колесные мини-погрузчики</p>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file

src/template/menu-list-main/index.html

 <div class="menu-list">
     <div class="wrapper menu-list__wrapper">
-        <ul class="menu-list__list">
+        <ul class="menu-list__list menu-list__mainpage">
             <li class="menu-list__item">
-                <a href="#" class="menu-list__link">
+                <a href="#" class="menu-list__link active">
                     <img src="img/icon-test.png" alt="" class="menu-list__ico">
                     <p class="menu-list__tit">Колесные мини-погрузчики</p>
                 </a>