Heroe carousel: advance one slide per click and respect loop/nav state

views/css/everblock.css

@@ -3237,8 +3237,6 @@
 /* Heroe carousel */
 .everblock-heroe-carousel {
   position: relative;
-  background: #0b0b0b;
-  color: #fff;
   touch-action: pan-y;
 }
 
@@ -3289,7 +3287,6 @@
 .everblock-heroe-carousel .heroe-media {
   position: absolute;
   inset: 0;
-  background: #0b0b0b;
 }
 
 .everblock-heroe-carousel .heroe-media picture,
@@ -3304,7 +3301,6 @@
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
   z-index: 1;
 }
 
@@ -3333,8 +3329,6 @@
   align-self: flex-start;
   padding: 12px 28px;
   border-radius: 999px;
-  background: #ffffff;
-  color: #111827;
   text-decoration: none;
   font-weight: 600;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -3353,7 +3347,6 @@
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.9);
   border: none;
   z-index: 10;
   cursor: pointer;
@@ -3365,8 +3358,8 @@
   content: '';
   width: 12px;
   height: 12px;
-  border-top: 2px solid #111827;
-  border-right: 2px solid #111827;
+  border-top: 2px solid currentColor;
+  border-right: 2px solid currentColor;
   display: block;
   transform: rotate(225deg);
 }

views/js/everblock.js

@@ -411,35 +411,73 @@ $(document).ready(function(){
             }
             var index = 0;
             var total = slides.length;
+            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 updateNavState() {
+                if (!prevButton && !nextButton) {
+                    return;
+                }
+                if (loop || total < 2) {
+                    if (prevButton) {
+                        prevButton.disabled = false;
+                        prevButton.setAttribute('aria-disabled', 'false');
+                    }
+                    if (nextButton) {
+                        nextButton.disabled = false;
+                        nextButton.setAttribute('aria-disabled', 'false');
+                    }
+                    return;
+                }
+                if (prevButton) {
+                    var prevDisabled = index <= 0;
+                    prevButton.disabled = prevDisabled;
+                    prevButton.setAttribute('aria-disabled', prevDisabled ? 'true' : 'false');
+                }
+                if (nextButton) {
+                    var nextDisabled = index >= total - 1;
+                    nextButton.disabled = nextDisabled;
+                    nextButton.setAttribute('aria-disabled', nextDisabled ? 'true' : 'false');
+                }
+            }
             function updateSlides() {
                 var activeSlide = slides[index];
                 var offset = 0;
                 if (activeSlide && viewport) {
                     var viewportWidth = viewport.offsetWidth;
-                    var activeWidth = activeSlide.offsetWidth;
-                    offset = activeSlide.offsetLeft - (viewportWidth - activeWidth) / 2;
-                    offset = Math.max(0, offset);
+                    var maxOffset = Math.max(0, track.scrollWidth - viewportWidth);
+                    var slideWidth = activeSlide.offsetWidth;
+                    offset = Math.min(Math.max(0, index * slideWidth), maxOffset);
                 }
                 track.style.transform = 'translateX(-' + offset + 'px)';
                 slides.forEach(function (slide, i) {
                     slide.classList.remove('is-active', 'is-prev', 'is-next');
                     if (i === index) {
                         slide.classList.add('is-active');
-                    } else if (i === (index + 1) % total) {
+                    } else if (loop && i === (index + 1) % total) {
+                        slide.classList.add('is-next');
+                    } else if (loop && i === (index - 1 + total) % total) {
+                        slide.classList.add('is-prev');
+                    } else if (!loop && i === index + 1) {
                         slide.classList.add('is-next');
-                    } else if (i === (index - 1 + total) % total) {
+                    } else if (!loop && i === index - 1) {
                         slide.classList.add('is-prev');
                     }
                 });
+                updateNavState();
             }
             function goNext() {
+                if (!loop && index >= total - 1) {
+                    return;
+                }
                 index = (index + 1) % total;
                 updateSlides();
             }
             function goPrev() {
+                if (!loop && index <= 0) {
+                    return;
+                }
                 index = (index - 1 + total) % total;
                 updateSlides();
             }

views/templates/hook/prettyblocks/prettyblock_heroe_carousel.tpl

@@ -36,7 +36,7 @@
 
 {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}">
+  <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}">
     <div class="heroe-carousel">
       <div class="heroe-viewport">
         <div class="heroe-track">