diff --git a/views/js/everblock.js b/views/js/everblock.js
index 9d89b2d..592a988 100644
--- a/views/js/everblock.js
+++ b/views/js/everblock.js
@@ -452,7 +452,11 @@ $(document).ready(function(){
                     var viewportWidth = viewport.offsetWidth;
                     var maxOffset = Math.max(0, track.scrollWidth - viewportWidth);
                     var slideWidth = activeSlide.offsetWidth;
-                    offset = Math.min(Math.max(0, index * slideWidth), maxOffset);
+                    if (slideWidth > 0) {
+                        var slidesPerView = Math.max(1, Math.round(viewportWidth / slideWidth));
+                        var centerOffset = Math.floor(slidesPerView / 2);
+                        offset = Math.min(Math.max(0, (index - centerOffset) * slideWidth), maxOffset);
+                    }
                 }
                 track.style.transform = 'translateX(-' + offset + 'px)';
                 slides.forEach(function (slide, i) {
diff --git a/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl b/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
index 26592bc..614b2cb 100644
--- a/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
+++ b/views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl
@@ -36,8 +36,11 @@
 
 {if $visibleStatesCount > 0}
   {assign var='lastVisibleIndex' value=$visibleStatesCount-1}
-  {assign var='middleVisibleIndex' value=($visibleStatesCount/2)|floor}
-  <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}" data-start-index="{$middleVisibleIndex}" style="{$prettyblock_spacing_style}">
+  {assign var='startVisibleIndex' value=0}
+  {if $visibleStatesCount > 1}
+    {assign var='startVisibleIndex' value=1}
+  {/if}
+  <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}" data-start-index="{$startVisibleIndex}" style="{$prettyblock_spacing_style}">
     <div class="heroe-carousel">
       <div class="heroe-viewport">
         <div class="heroe-track">
@@ -70,7 +73,7 @@
               {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 == $middleVisibleIndex} is-active{/if}" data-slide-index="{$slideIndex}">
+              <article class="heroe-slide{if $slideIndex == $startVisibleIndex} is-active{/if}" data-slide-index="{$slideIndex}">
                 <div class="heroe-media">
                   <picture>
                     {if $mobileImageUrl ne ''}