diff --git a/views/css/everblock.css b/views/css/everblock.css
index b9da0b4..b09a3c9 100644
--- a/views/css/everblock.css
+++ b/views/css/everblock.css
@@ -3236,21 +3236,25 @@
 
 /* Heroe carousel */
 .everblock-heroe-carousel {
-  --heroe-slide-width: 62%;
-  --heroe-slide-gap: 32px;
   position: relative;
-  height: 560px;
-  overflow: hidden;
   background: #0b0b0b;
   color: #fff;
   touch-action: pan-y;
 }
 
-.everblock-heroe-carousel .heroe-carousel-track {
+.everblock-heroe-carousel .heroe-carousel {
   position: relative;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.everblock-heroe-carousel .heroe-viewport {
+  overflow: hidden;
+  height: 560px;
+}
+
+.everblock-heroe-carousel .heroe-track {
   display: flex;
-  align-items: center;
-  gap: var(--heroe-slide-gap);
   height: 100%;
   width: 100%;
   transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
@@ -3259,13 +3263,12 @@
 
 .everblock-heroe-carousel .heroe-slide {
   position: relative;
-  flex: 0 0 var(--heroe-slide-width);
-  min-width: var(--heroe-slide-width);
+  flex: 0 0 80%;
+  margin: 0 10%;
   height: 100%;
-  opacity: 0;
+  opacity: 0.35;
   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);
+  transition: transform 0.8s ease, opacity 0.8s ease;
   will-change: transform, opacity;
   display: flex;
   align-items: center;
@@ -3274,24 +3277,7 @@
 
 .everblock-heroe-carousel .heroe-slide.is-active {
   opacity: 1;
-  transform: scale(1.03);
-  z-index: 3;
-}
-
-.everblock-heroe-carousel .heroe-slide.is-next,
-.everblock-heroe-carousel .heroe-slide.is-prev {
-  opacity: 0.45;
-  transform: scale(0.92);
-  z-index: 2;
-}
-
-.everblock-heroe-carousel .heroe-slide.is-next {
-  filter: grayscale(1);
-  opacity: 0.6;
-}
-
-.everblock-heroe-carousel .heroe-slide.is-prev {
-  opacity: 0.45;
+  transform: scale(1);
 }
 
 .everblock-heroe-carousel .heroe-media {
@@ -3384,32 +3370,32 @@
 }
 
 .everblock-heroe-carousel .heroe-prev {
-  left: 50%;
-  transform: translate(calc(-50% - (var(--heroe-slide-width) * 0.5) - 24px), -50%);
+  left: 8%;
 }
 
 .everblock-heroe-carousel .heroe-next {
-  left: 50%;
-  transform: translate(calc(-50% + (var(--heroe-slide-width) * 0.5) + 24px), -50%);
+  right: 8%;
 }
 
 @media (max-width: 1024px) {
-  .everblock-heroe-carousel {
+  .everblock-heroe-carousel .heroe-viewport {
     height: 500px;
   }
 }
 
 @media (max-width: 768px) {
-  .everblock-heroe-carousel {
+  .everblock-heroe-carousel .heroe-viewport {
     height: 420px;
-    --heroe-slide-width: 100%;
-    --heroe-slide-gap: 0px;
   }
 
-  .everblock-heroe-carousel .heroe-slide.is-next,
-  .everblock-heroe-carousel .heroe-slide.is-prev {
-    opacity: 0;
-    transform: scale(1);
+  .everblock-heroe-carousel .heroe-slide {
+    flex: 0 0 100%;
+    margin: 0;
+    opacity: 0.2;
+  }
+
+  .everblock-heroe-carousel .heroe-slide.is-active {
+    opacity: 1;
   }
 
   .everblock-heroe-carousel .heroe-content {
diff --git a/views/js/everblock.js b/views/js/everblock.js
index a290df1..b9e3a15 100644
--- a/views/js/everblock.js
+++ b/views/js/everblock.js
@@ -404,73 +404,27 @@ $(document).ready(function(){
             if (!slides.length) {
                 return;
             }
-            var track = carousel.querySelector('.heroe-carousel-track');
+            var track = carousel.querySelector('.heroe-track');
             if (!track) {
                 return;
             }
             var index = 0;
-            var loop = carousel.dataset.loop !== '0';
             var showArrows = carousel.dataset.showArrows !== '0';
             var prevButton = carousel.querySelector('.heroe-prev');
             var nextButton = carousel.querySelector('.heroe-next');
             function updateSlides() {
-                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;
-                if (window.getComputedStyle) {
-                    var trackStyle = window.getComputedStyle(track);
-                    computedGap = parseFloat(trackStyle.columnGap || trackStyle.gap || 0);
-                    if (isNaN(computedGap)) {
-                        computedGap = 0;
-                    }
-                }
-                if (!slideWidth || !carouselWidth) {
-                    track.style.transform = 'translateX(0px)';
-                    return;
-                }
-                var offset = index * (slideWidth + computedGap) - (carouselWidth - slideWidth) / 2;
-                var translateX = -offset;
-                if (!isFinite(translateX)) {
-                    track.style.transform = 'translateX(0px)';
-                    return;
-                }
-                track.style.transform = 'translateX(' + translateX + 'px)';
+                var offset = index * -100;
+                track.style.transform = 'translateX(' + offset + '%)';
                 slides.forEach(function (slide, i) {
-                    slide.classList.remove('is-active', 'is-next', 'is-prev');
-                    if (i === index) {
-                        slide.classList.add('is-active');
-                    } else if (nextIndex !== null && i === nextIndex) {
-                        slide.classList.add('is-next');
-                    } else if (prevIndex !== null && i === prevIndex) {
-                        slide.classList.add('is-prev');
-                    }
+                    slide.classList.toggle('is-active', i === index);
                 });
             }
             function goNext() {
-                if (!loop && index >= slides.length - 1) {
-                    return;
-                }
-                index = loop ? (index + 1) % slides.length : Math.min(index + 1, slides.length - 1);
+                index = (index + 1) % slides.length;
                 updateSlides();
             }
             function goPrev() {
-                if (!loop && index <= 0) {
-                    return;
-                }
-                index = loop ? (index - 1 + slides.length) % slides.length : Math.max(index - 1, 0);
+                index = (index - 1 + slides.length) % slides.length;
                 updateSlides();
             }
 
@@ -516,36 +470,6 @@ $(document).ready(function(){
                         }
                     }
                 }, { passive: true });
-                carousel.addEventListener('pointerdown', function (event) {
-                    if (event.pointerType === 'mouse') {
-                        return;
-                    }
-                    touchStartX = event.clientX;
-                    touchStartY = event.clientY;
-                }, { passive: true });
-                carousel.addEventListener('pointerup', function (event) {
-                    if (event.pointerType === 'mouse') {
-                        return;
-                    }
-                    var deltaXPointer = event.clientX - touchStartX;
-                    var deltaYPointer = event.clientY - touchStartY;
-                    if (Math.abs(deltaXPointer) > 50 && Math.abs(deltaXPointer) > Math.abs(deltaYPointer)) {
-                        if (deltaXPointer < 0) {
-                            goNext();
-                        } else {
-                            goPrev();
-                        }
-                    }
-                }, { passive: true });
-                carousel.addEventListener('wheel', function (event) {
-                    if (Math.abs(event.deltaX) > Math.abs(event.deltaY) && Math.abs(event.deltaX) > 20) {
-                        if (event.deltaX > 0) {
-                            goNext();
-                        } else {
-                            goPrev();
-                        }
-                    }
-                }, { passive: true });
             }
 
             window.addEventListener('resize', function () {
diff --git a/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl b/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
index 1811755..a92a8b2 100644
--- a/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
+++ b/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
@@ -37,69 +37,73 @@
 {if $visibleStatesCount > 0}
   {assign var='lastVisibleIndex' value=$visibleStatesCount-1}
   <section id="block-{$block.id_prettyblocks}" class="everblock-heroe-carousel{$prettyblock_visibility_class}" data-loop="{if $heroeLoop}1{else}0{/if}" data-show-arrows="{if $showArrows}1{else}0{/if}" style="{$prettyblock_spacing_style}{if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};{/if}">
-    <div class="heroe-carousel-track">
-      {assign var='slideIndex' value=0}
-      {foreach from=$block.states item=state key=key}
-        {assign var='isStateVisible' value=true}
-        {if (not isset($state.image.url) or $state.image.url eq '') and (not isset($state.image_mobile.url) or $state.image_mobile.url eq '')}
-          {assign var='isStateVisible' value=false}
-        {/if}
-        {if $isStateVisible}
-          {assign var='desktopImageUrl' value=$state.image.url|default:''}
-          {assign var='desktopImageJpgUrl' value=$desktopImageUrl|replace:'.webp':'.jpg'}
-          {assign var='mobileImageUrl' value=$state.image_mobile.url|default:''}
-          {assign var='mobileImageJpgUrl' value=$mobileImageUrl|replace:'.webp':'.jpg'}
-          {if $mobileImageUrl eq '' && $desktopImageUrl ne ''}
-            {assign var='mobileImageUrl' value=$desktopImageUrl}
-            {assign var='mobileImageJpgUrl' value=$desktopImageJpgUrl}
-          {/if}
-          {assign var='fallbackImageUrl' value=$desktopImageUrl|default:$mobileImageUrl}
-          {assign var='fallbackImageJpgUrl' value=$desktopImageJpgUrl|default:$mobileImageJpgUrl}
-          {assign var='fallbackWidth' value=''}
-          {assign var='fallbackHeight' value=''}
-          {if isset($state.image.width) && $state.image.width > 0}
-            {assign var='fallbackWidth' value=$state.image.width|intval}
-          {elseif isset($state.image_mobile.width) && $state.image_mobile.width > 0}
-            {assign var='fallbackWidth' value=$state.image_mobile.width|intval}
-          {/if}
-          {if isset($state.image.height) && $state.image.height > 0}
-            {assign var='fallbackHeight' value=$state.image.height|intval}
-          {elseif isset($state.image_mobile.height) && $state.image_mobile.height > 0}
-            {assign var='fallbackHeight' value=$state.image_mobile.height|intval}
-          {/if}
-          <article class="heroe-slide{if $slideIndex == 0} is-active{elseif $slideIndex == 1} is-next{elseif $slideIndex == $lastVisibleIndex} is-prev{/if}" data-slide-index="{$slideIndex}">
-            <div class="heroe-media">
-              <picture>
-                {if $mobileImageUrl ne ''}
-                  <source media="(max-width: 767.98px)" srcset="{$mobileImageUrl}" type="image/webp">
-                  <source media="(max-width: 767.98px)" srcset="{$mobileImageJpgUrl}" type="image/jpeg">
-                {/if}
-                {if $desktopImageUrl ne ''}
-                  <source media="(min-width: 768px)" srcset="{$desktopImageUrl}" type="image/webp">
-                  <source media="(min-width: 768px)" srcset="{$desktopImageJpgUrl}" type="image/jpeg">
-                {/if}
-                <img src="{$fallbackImageJpgUrl}" alt="{$state.title|default:''|escape:'htmlall':'UTF-8'}"{if $fallbackWidth ne ''} width="{$fallbackWidth}"{/if}{if $fallbackHeight ne ''} height="{$fallbackHeight}"{/if}>
-              </picture>
-            </div>
-            <div class="heroe-content">
-              {if $state.title}
-                <h2 class="heroe-title">{$state.title|escape:'htmlall':'UTF-8'}</h2>
+    <div class="heroe-carousel">
+      <div class="heroe-viewport">
+        <div class="heroe-track">
+          {assign var='slideIndex' value=0}
+          {foreach from=$block.states item=state key=key}
+            {assign var='isStateVisible' value=true}
+            {if (not isset($state.image.url) or $state.image.url eq '') and (not isset($state.image_mobile.url) or $state.image_mobile.url eq '')}
+              {assign var='isStateVisible' value=false}
+            {/if}
+            {if $isStateVisible}
+              {assign var='desktopImageUrl' value=$state.image.url|default:''}
+              {assign var='desktopImageJpgUrl' value=$desktopImageUrl|replace:'.webp':'.jpg'}
+              {assign var='mobileImageUrl' value=$state.image_mobile.url|default:''}
+              {assign var='mobileImageJpgUrl' value=$mobileImageUrl|replace:'.webp':'.jpg'}
+              {if $mobileImageUrl eq '' && $desktopImageUrl ne ''}
+                {assign var='mobileImageUrl' value=$desktopImageUrl}
+                {assign var='mobileImageJpgUrl' value=$desktopImageJpgUrl}
               {/if}
-              {if $state.content}
-                <div class="heroe-text">{$state.content nofilter}</div>
+              {assign var='fallbackImageUrl' value=$desktopImageUrl|default:$mobileImageUrl}
+              {assign var='fallbackImageJpgUrl' value=$desktopImageJpgUrl|default:$mobileImageJpgUrl}
+              {assign var='fallbackWidth' value=''}
+              {assign var='fallbackHeight' value=''}
+              {if isset($state.image.width) && $state.image.width > 0}
+                {assign var='fallbackWidth' value=$state.image.width|intval}
+              {elseif isset($state.image_mobile.width) && $state.image_mobile.width > 0}
+                {assign var='fallbackWidth' value=$state.image_mobile.width|intval}
               {/if}
-              {if $state.cta_label && $state.cta_link}
-                <a class="heroe-cta" href="{$state.cta_link|escape:'htmlall':'UTF-8'}" title="{$state.cta_label|escape:'htmlall':'UTF-8'}">{$state.cta_label|escape:'htmlall':'UTF-8'}</a>
+              {if isset($state.image.height) && $state.image.height > 0}
+                {assign var='fallbackHeight' value=$state.image.height|intval}
+              {elseif isset($state.image_mobile.height) && $state.image_mobile.height > 0}
+                {assign var='fallbackHeight' value=$state.image_mobile.height|intval}
               {/if}
-            </div>
-          </article>
-          {assign var='slideIndex' value=$slideIndex+1}
-        {/if}
-      {/foreach}
+              <article class="heroe-slide{if $slideIndex == 0} is-active{/if}" data-slide-index="{$slideIndex}">
+                <div class="heroe-media">
+                  <picture>
+                    {if $mobileImageUrl ne ''}
+                      <source media="(max-width: 767.98px)" srcset="{$mobileImageUrl}" type="image/webp">
+                      <source media="(max-width: 767.98px)" srcset="{$mobileImageJpgUrl}" type="image/jpeg">
+                    {/if}
+                    {if $desktopImageUrl ne ''}
+                      <source media="(min-width: 768px)" srcset="{$desktopImageUrl}" type="image/webp">
+                      <source media="(min-width: 768px)" srcset="{$desktopImageJpgUrl}" type="image/jpeg">
+                    {/if}
+                    <img src="{$fallbackImageJpgUrl}" alt="{$state.title|default:''|escape:'htmlall':'UTF-8'}"{if $fallbackWidth ne ''} width="{$fallbackWidth}"{/if}{if $fallbackHeight ne ''} height="{$fallbackHeight}"{/if}>
+                  </picture>
+                </div>
+                <div class="heroe-content">
+                  {if $state.title}
+                    <h2 class="heroe-title">{$state.title|escape:'htmlall':'UTF-8'}</h2>
+                  {/if}
+                  {if $state.content}
+                    <div class="heroe-text">{$state.content nofilter}</div>
+                  {/if}
+                  {if $state.cta_label && $state.cta_link}
+                    <a class="heroe-cta" href="{$state.cta_link|escape:'htmlall':'UTF-8'}" title="{$state.cta_label|escape:'htmlall':'UTF-8'}">{$state.cta_label|escape:'htmlall':'UTF-8'}</a>
+                  {/if}
+                </div>
+              </article>
+              {assign var='slideIndex' value=$slideIndex+1}
+            {/if}
+          {/foreach}
+        </div>
+      </div>
+      {if $showArrows && $visibleStatesCount > 1}
+        <button class="heroe-nav heroe-prev" type="button" aria-label="{l s='Previous' mod='everblock'}"></button>
+        <button class="heroe-nav heroe-next" type="button" aria-label="{l s='Next' mod='everblock'}"></button>
+      {/if}
     </div>
-    {if $showArrows && $visibleStatesCount > 1}
-      <button class="heroe-nav heroe-prev" type="button" aria-label="{l s='Previous' mod='everblock'}"></button>
-      <button class="heroe-nav heroe-next" type="button" aria-label="{l s='Next' mod='everblock'}"></button>
-    {/if}
   </section>
 {/if}