From 74fb21358ed8ca951bccb6bcf5989fabfa68ff7e Mon Sep 17 00:00:00 2001
From: Kirill Pet <job.mori.1967@gmail.com>
Date: Fri, 20 Dec 2024 17:00:34 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20swiper-r?=
 =?UTF-8?q?eviews-img?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/gp-style-desktop.css | 20 ++++++++++++++++++++
 assets/css/gp-style-tablet.css  | 20 ++++++++++++++++++++
 assets/js/main.js               | 18 ++++++++++++++++++
 index.html                      | 24 ++++++++++++++++++++++--
 4 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 3e3ab59..4ade042 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -859,6 +859,26 @@
 
     flex-shrink: 0;
 }
+.reviews-item__img-block{
+    margin-left: 164px;
+
+    width: 577px;
+    height: 600px;
+    border-radius: 4px;
+
+    object-fit: cover;
+
+    flex-shrink: 0;
+
+    position: relative;
+}
+.reviews .reviews-item__img-block .swiper-pagination{
+    bottom: 16px;
+
+    padding-right: 0px;
+
+    text-align: center;
+}
 .reviews .swiper-pagination{
     position: absolute;
     right: 32px;
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index ce4a139..5e24ffd 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -665,6 +665,26 @@ main{
     height: 300px;
     width: 100%;
 }
+.reviews-item__img-block{
+    margin-top: 24px;
+    margin-left: 0;
+
+    height: 300px;
+    width: 100%;
+}
+.swiper-reviews-img{
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide{
+    width: 100%;
+    height: 100%;
+}
+.reviews-item__img-block .swiper-slide img{    
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+}
 .reviews .swiper-pagination{
     bottom: 87px;
 
diff --git a/assets/js/main.js b/assets/js/main.js
index 2068556..ab8ea02 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -40,6 +40,20 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
+let reviewsSwiperImg = new Swiper(".swiper-reviews-img", {
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+    },
+    pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+        renderBullet: function (index, className) {
+            return '<span class="' + className + '">' + "</span>";
+        },
+    },
+});
+
 const projectsSwiper = new Swiper('.projects-swiper', {
     direction: 'horizontal',
     breakpoints: {
@@ -284,6 +298,8 @@ phoneInputs.forEach(phoneInput => {
     });
 })
 
+// masks end
+
 // pc menu
 
 let blocksMenu = document.querySelectorAll('.header-menu-list-next__block');
@@ -332,6 +348,8 @@ blocksMenu.forEach(block =>{
     
 })
 
+// pc menu end
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;
diff --git a/index.html b/index.html
index 4605f65..0dde58a 100644
--- a/index.html
+++ b/index.html
@@ -787,7 +787,28 @@
                                 </div>
                             </div>
     
-                            <img src="/assets/img/photo/reviews.png" alt="" class="reviews-item__img">
+                            <div class="reviews-item__img-block">
+                                <div class="swiper swiper-reviews-img">
+                                    <div class="swiper-wrapper">
+                                      <div class="swiper-slide">
+                                        <img src="/assets/img/photo/reviews.png" alt="">
+                                      </div>
+                                      <div class="swiper-slide">
+                                        <img src="/assets/img/photo/reviews.png" alt="">
+                                      </div>
+                                      <div class="swiper-slide">
+                                        <img src="/assets/img/photo/reviews.png" alt="">
+                                      </div>
+                                      <div class="swiper-slide">
+                                        <img src="/assets/img/photo/reviews.png" alt="">
+                                      </div>
+                                      <div class="swiper-slide">
+                                        <img src="/assets/img/photo/reviews.png" alt="">
+                                      </div>
+                                    </div>
+                                    <div class="swiper-pagination"></div>
+                                  </div>
+                            </div>
                         </div>
 
                         <div class="reviews__item swiper-slide">
@@ -907,7 +928,6 @@
                         </div>
                     </div>
 
-                    <div class="swiper-pagination"></div>
 
                     <div class="reviews__counter">
                         <div class="swiper-button-prev"></div>