newslideshow.liquid

{% comment %}
Custom Slideshow Section
Features: 
- Desktop + Mobile image upload
- Adaptive height
- Auto rotation with adjustable timer
- Pause on hover
- Elegant hover-only glass arrows
{% endcomment %}
<section id="custom-slideshow" class="custom-slideshow">
  <div class="slideshow-wrapper">
    {% for block in section.blocks %}
      <div class="slideshow-slide" style="height: {{ block.settings.adapt_height | default: 'auto' }};">
        <picture>
          <source 
            media="(max-width: 767px)" 
            srcset="{{ block.settings.mobile_image | img_url: 'master' }}">
          <img 
            src="{{ block.settings.desktop_image | img_url: 'master' }}" 
            alt="{{ block.settings.alt_text | escape }}" 
            loading="lazy"
            class="slideshow-image {% if section.settings.adapt_to_image %}adapt-height{% endif %}">
        </picture>
        {% if block.settings.link != blank %}
          <a href="{{ block.settings.link }}" class="slide-link"></a>
        {% endif %}
      </div>
    {% endfor %}

    <button class="slide-arrow prev" aria-label="Previous">
      <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="15 18 9 12 15 6"></polyline>
      </svg>
    </button>
    <button class="slide-arrow next" aria-label="Next">
      <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9 18 15 12 9 6"></polyline>
      </svg>
    </button>
  </div>
</section>

<style>
.custom-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slideshow-wrapper {
  display: flex;
  transition: transform 0.6s ease;
}
.slideshow-slide {
  min-width: 100%;
  position: relative;
}
.slideshow-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.slide-link {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
}

/* Arrows */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  color: #111;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  padding: 8px;
  z-index: 5;
}
.slide-arrow svg {
  display: block;
}
.custom-slideshow:hover .slide-arrow {
  opacity: 1;
  pointer-events: auto;
}
.slide-arrow:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-50%) scale(1.1);
}
.slide-arrow.prev { left: 16px; }
.slide-arrow.next { right: 16px; }

/* Mobile */
@media(max-width: 767px){
  .slide-arrow {
    padding: 6px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.slideshow-wrapper');
  const slides = document.querySelectorAll('.slideshow-slide');
  const next = document.querySelector('.slide-arrow.next');
  const prev = document.querySelector('.slide-arrow.prev');
  const section = document.querySelector('#custom-slideshow');
  const autoplayDelay = {{ section.settings.autoplay_delay | default: 5 }} * 1000;

  let index = 0;
  let interval;

  function updateSlide() {
    wrapper.style.transform = `translateX(-${index * 100}%)`;
  }

  function nextSlide() {
    index = (index + 1) % slides.length;
    updateSlide();
  }

  function prevSlide() {
    index = (index - 1 + slides.length) % slides.length;
    updateSlide();
  }

  function startAutoplay() {
    stopAutoplay();
    interval = setInterval(nextSlide, autoplayDelay);
  }

  function stopAutoplay() {
    if (interval) clearInterval(interval);
  }

  next.addEventListener('click', () => {
    nextSlide();
    startAutoplay();
  });
  prev.addEventListener('click', () => {
    prevSlide();
    startAutoplay();
  });

  section.addEventListener('mouseenter', stopAutoplay);
  section.addEventListener('mouseleave', startAutoplay);

  if (slides.length > 1) startAutoplay();
});
</script>

{% schema %}
{
  "name": "Custom Slideshow",
  "settings": [
    {
      "type": "checkbox",
      "id": "adapt_to_image",
      "label": "Adapt height to image",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_delay",
      "label": "Slide change delay (seconds)",
      "min": 2,
      "max": 15,
      "step": 1,
      "default": 5
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        { "type": "image_picker", "id": "desktop_image", "label": "Desktop Image" },
        { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image" },
        { "type": "text", "id": "alt_text", "label": "Alt text" },
        { "type": "url", "id": "link", "label": "Optional link" },
        {
          "type": "select",
          "id": "adapt_height",
          "label": "Slide height",
          "options": [
            { "value": "auto", "label": "Adapt to image" },
            { "value": "60vh", "label": "60% of viewport height" },
            { "value": "80vh", "label": "80% of viewport height" },
            { "value": "100vh", "label": "Full screen" }
          ],
          "default": "auto"
        }
      ]
    }
  ],
  "presets": [
    { "name": "Custom Slideshow", "category": "Media" }
  ]
}
{% endschema %}