From 57705bbb2d2b716697f49567804d853db7d280e0 Mon Sep 17 00:00:00 2001
From: Cyssoo <cyrilchalamon@gmail.com>
Date: Thu, 29 Jan 2026 14:47:40 +0100
Subject: [PATCH] Improve heroe carousel layout

---
 views/css/everblock.css | 15 ++++++++-------
 views/js/everblock.js   | 20 ++++++++++++++++----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/views/css/everblock.css b/views/css/everblock.css
index 09296fe..b9da0b4 100644
--- a/views/css/everblock.css
+++ b/views/css/everblock.css
@@ -3236,7 +3236,7 @@
 
 /* Heroe carousel */
 .everblock-heroe-carousel {
-  --heroe-slide-width: 70%;
+  --heroe-slide-width: 62%;
   --heroe-slide-gap: 32px;
   position: relative;
   height: 560px;
@@ -3263,7 +3263,7 @@
   min-width: var(--heroe-slide-width);
   height: 100%;
   opacity: 0;
-  transform: scale(0.92);
+  transform: scale(0.9);
   transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
     transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, opacity;
@@ -3274,20 +3274,20 @@
 
 .everblock-heroe-carousel .heroe-slide.is-active {
   opacity: 1;
-  transform: scale(1);
+  transform: scale(1.03);
   z-index: 3;
 }
 
 .everblock-heroe-carousel .heroe-slide.is-next,
 .everblock-heroe-carousel .heroe-slide.is-prev {
-  opacity: 0.35;
-  transform: scale(0.9);
+  opacity: 0.45;
+  transform: scale(0.92);
   z-index: 2;
 }
 
 .everblock-heroe-carousel .heroe-slide.is-next {
   filter: grayscale(1);
-  opacity: 0.55;
+  opacity: 0.6;
 }
 
 .everblock-heroe-carousel .heroe-slide.is-prev {
@@ -3297,13 +3297,14 @@
 .everblock-heroe-carousel .heroe-media {
   position: absolute;
   inset: 0;
+  background: #0b0b0b;
 }
 
 .everblock-heroe-carousel .heroe-media picture,
 .everblock-heroe-carousel .heroe-media img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   display: block;
 }
 
diff --git a/views/js/everblock.js b/views/js/everblock.js
index e687490..d131edc 100644
--- a/views/js/everblock.js
+++ b/views/js/everblock.js
@@ -414,8 +414,19 @@ $(document).ready(function(){
             var prevButton = carousel.querySelector('.heroe-prev');
             var nextButton = carousel.querySelector('.heroe-next');
             function updateSlides() {
-                var nextIndex = loop ? (index + 1) % slides.length : index + 1;
-                var prevIndex = loop ? (index - 1 + slides.length) % slides.length : index - 1;
+                var slideCount = slides.length;
+                var useWrappedDisplay = slideCount > 2;
+                var nextIndex = null;
+                var prevIndex = null;
+                if (slideCount > 1) {
+                    if (loop || useWrappedDisplay) {
+                        nextIndex = (index + 1) % slideCount;
+                        prevIndex = (index - 1 + slideCount) % slideCount;
+                    } else {
+                        nextIndex = index + 1 < slideCount ? index + 1 : null;
+                        prevIndex = index - 1 >= 0 ? index - 1 : null;
+                    }
+                }
                 var slideWidth = slides[0].getBoundingClientRect().width;
                 var carouselWidth = carousel.getBoundingClientRect().width;
                 var computedGap = 0;
@@ -432,9 +443,9 @@ $(document).ready(function(){
                     slide.classList.remove('is-active', 'is-next', 'is-prev');
                     if (i === index) {
                         slide.classList.add('is-active');
-                    } else if (nextIndex >= 0 && nextIndex < slides.length && i === nextIndex) {
+                    } else if (nextIndex !== null && i === nextIndex) {
                         slide.classList.add('is-next');
-                    } else if (prevIndex >= 0 && prevIndex < slides.length && i === prevIndex) {
+                    } else if (prevIndex !== null && i === prevIndex) {
                         slide.classList.add('is-prev');
                     }
                 });
@@ -546,6 +557,7 @@ $(document).ready(function(){
         everblockCarouselResizeTimeout = setTimeout(function () {
             initPrettyblocksImageSlider();
             initEverblockCarousels();
+            initHeroeCarousels();
         }, 200);
     });
     function padEverblockCarouselSlides($carousel) {