Blog

{%- style -%}
  #collection-slider-{{ section.id }} {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    #collection-slider-{{ section.id }} {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  #shopify-section-{{ section.id }} {
    background-color: {{ section.settings.background_color }};
    color: {{ section.settings.text_color }};
    /* Shadow toggle: values become "none" when disabled, removing paint cost entirely */
    --card-shadow-rest: {% if section.settings.enable_shadow %}0 8px 24px rgba(0, 0, 0, 0.08){% else %}none{% endif %};
    --card-shadow-hover: {% if section.settings.enable_shadow %}0 16px 40px rgba(0, 0, 0, 0.12){% else %}none{% endif %};
    --card-shadow-active: {% if section.settings.enable_shadow %}0 20px 50px rgba(0, 0, 0, 0.15){% else %}none{% endif %};
    /* Border toggle: width collapses to 0 when disabled, so no border is painted */
    --card-border-width: {% if section.settings.enable_border %}{{ section.settings.border_width }}px{% else %}0px{% endif %};
    --card-border-color: {{ section.settings.border_color }};
  }

  #shopify-section-{{ section.id }} .collection-slider__arrow {
    background-color: {{ section.settings.arrow_background }};
    color: {{ section.settings.arrow_color }};
    border: 2px solid {{ section.settings.arrow_border_color }};
  }

  #shopify-section-{{ section.id }} .collection-slider__arrow:hover {
    background-color: {{ section.settings.arrow_background_hover }};
    color: {{ section.settings.arrow_color_hover }};
    border-color: {{ section.settings.arrow_border_color_hover }};
  }
{%- endstyle -%}

<style>
  #collection-slider-{{ section.id }} {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #collection-slider-{{ section.id }} .collection-slider__container {
    position: relative;
    padding: 60px 0;
  }

  #collection-slider-{{ section.id }} .collection-slider__track-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Isolates layout/paint work to this box so slide animation doesn't force
       the browser to re-check the rest of the page on every frame */
    contain: layout style paint;
  }

  #collection-slider-{{ section.id }} .collection-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #collection-slider-{{ section.id }} .collection-slider__slide {
    position: absolute;
    width: 340px;
    height: 450px;
    /* transform/opacity only: cheap, GPU-composited properties */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
    transform: translate3d(0, 0, 0) scale(0.85);
    will-change: transform, opacity;
  }

  #collection-slider-{{ section.id }} .collection-slider__card {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: {{ section.settings.card_border_radius }}px;
    overflow: hidden;
    border: var(--card-border-width) solid var(--card-border-color);
    box-shadow: var(--card-shadow-rest);
    transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  #collection-slider-{{ section.id }} .collection-slider__card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow-hover);
  }

  #collection-slider-{{ section.id }} .collection-slider__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
  }

  #collection-slider-{{ section.id }} .collection-slider__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #collection-slider-{{ section.id }} .collection-slider__card:hover .collection-slider__image {
    transform: scale(1.05);
  }

  #collection-slider-{{ section.id }} .collection-slider__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: white;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 2;
  }

  #collection-slider-{{ section.id }} .collection-slider__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: center;
    color: #333;
    line-height: 1.3;
  }

  #collection-slider-{{ section.id }} .collection-slider__navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--card-shadow-rest);
    z-index: 20;
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--card-shadow-hover);
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow svg {
    width: 24px;
    height: 24px;
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow--prev {
    left: 30px;
  }

  #collection-slider-{{ section.id }} .collection-slider__arrow--next {
    right: 30px;
  }

  #collection-slider-{{ section.id }} .section-header {
    margin-bottom: 0px;
    {% if section.settings.text_alignment == 'left' %}
      text-align: left;
    {% elsif section.settings.text_alignment == 'right' %}
      text-align: right;
    {% else %}
      text-align: center;
    {% endif %}
  }

  {% if section.settings.text_alignment == 'left' %}
    #collection-slider-{{ section.id }} .section-subtitle {
      margin: 0;
    }
  {% elsif section.settings.text_alignment == 'right' %}
    #collection-slider-{{ section.id }} .section-subtitle {
      margin: 0 0 0 auto;
    }
  {% else %}
    #collection-slider-{{ section.id }} .section-subtitle {
      margin: 0 auto;
    }
  {% endif %}

  #collection-slider-{{ section.id }} .section-title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 0px 0;
    line-height: 1.2;
    color: {{ section.settings.text_color }};
  }
  #collection-slider-{{ section.id }} .section-title p {
    margin: 0;
   }

  #collection-slider-{{ section.id }} .section-subtitle {
    font-size: 18px;
    color: {{ section.settings.text_color }};
    max-width: 500px;
    line-height: 1.6;
  }

  #collection-slider-{{ section.id }} .page-width {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) !important;
    z-index: 10;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.active .collection-slider__card {
    box-shadow: var(--card-shadow-active);
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.left-1 {
    transform: translate3d(-190px, 0, 0) scale(0.92);
    opacity: 0.8;
    z-index: 5;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.left-2 {
    transform: translate3d(-340px, 0, 0) scale(0.85);
    opacity: 0.6;
    z-index: 4;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.right-1 {
    transform: translate3d(190px, 0, 0) scale(0.92);
    opacity: 0.8;
    z-index: 5;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.right-2 {
    transform: translate3d(340px, 0, 0) scale(0.85);
    opacity: 0.6;
    z-index: 4;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.left-3,
  #collection-slider-{{ section.id }} .collection-slider__slide.right-3 {
    opacity: 0.3;
    transform: translate3d(0, 0, 0) scale(0.75);
    z-index: 1;
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.left-3 {
    transform: translate3d(-480px, 0, 0) scale(0.75);
  }

  #collection-slider-{{ section.id }} .collection-slider__slide.right-3 {
    transform: translate3d(480px, 0, 0) scale(0.75);
  }

  @media (max-width: 1200px) {
    #collection-slider-{{ section.id }} .collection-slider__slide {
      width: 300px;
      height: 420px;
    }

    #collection-slider-{{ section.id }} .collection-slider__track-container {
      height: 470px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow--prev {
      left: 20px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow--next {
      right: 20px;
    }

    #collection-slider-{{ section.id }} .page-width {
      padding: 0 40px;
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.left-1 {
      transform: translate3d(-170px, 0, 0) scale(0.92);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.left-2 {
      transform: translate3d(-300px, 0, 0) scale(0.85);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.right-1 {
      transform: translate3d(170px, 0, 0) scale(0.92);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.right-2 {
      transform: translate3d(300px, 0, 0) scale(0.85);
    }
  }

  @media (max-width: 768px) {
    #collection-slider-{{ section.id }} .collection-slider__slide {
      width: 260px;
      height: 380px;
    }

    #collection-slider-{{ section.id }} .collection-slider__track-container {
      height: 430px;
    }

    #collection-slider-{{ section.id }} .collection-slider__image {
      object-fit: contain;
    }

    #collection-slider-{{ section.id }} .collection-slider__card:hover .collection-slider__image {
      transform: scale(1.02);
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow {
      width: 40px;
      height: 40px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow svg {
      width: 20px;
      height: 20px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow--prev {
      left: 10px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow--next {
      right: 10px;
    }

    #collection-slider-{{ section.id }} .section-title {
      font-size: 32px;
    }

    #collection-slider-{{ section.id }} .section-subtitle {
      font-size: 16px;
    }

    #collection-slider-{{ section.id }} .page-width {
      padding: 0 30px;
    }

    #collection-slider-{{ section.id }} .collection-slider__content {
      height: 70px;
      padding: 16px;
    }

    #collection-slider-{{ section.id }} .collection-slider__title {
      font-size: 16px;
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.left-1 {
      transform: translate3d(-150px, 0, 0) scale(0.92);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.left-2 {
      transform: translate3d(-260px, 0, 0) scale(0.85);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.right-1 {
      transform: translate3d(150px, 0, 0) scale(0.92);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.right-2 {
      transform: translate3d(260px, 0, 0) scale(0.85);
    }
  }

  @media (max-width: 480px) {
    #collection-slider-{{ section.id }} .collection-slider__slide {
      width: 220px;
      height: 340px;
    }

    #collection-slider-{{ section.id }} .collection-slider__track-container {
      height: 390px;
    }

    #collection-slider-{{ section.id }} .collection-slider__image {
      object-fit: contain;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow {
      width: 36px;
      height: 36px;
    }

    #collection-slider-{{ section.id }} .collection-slider__arrow svg {
      width: 18px;
      height: 18px;
    }

    #collection-slider-{{ section.id }} .section-title {
      font-size: 28px;
    }

    #collection-slider-{{ section.id }} .section-subtitle {
      font-size: 14px;
    }

    #collection-slider-{{ section.id }} .page-width {
      padding: 0 20px;
    }

    #collection-slider-{{ section.id }} .collection-slider__content {
      height: 60px;
      padding: 12px;
    }

    #collection-slider-{{ section.id }} .collection-slider__title {
      font-size: 14px;
    }

    #collection-slider-{{ section.id }} .collection-slider__slide:not(.active):not(.left-1):not(.right-1) {
      display: none;
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.left-1 {
      transform: translate3d(-130px, 0, 0) scale(0.85);
    }

    #collection-slider-{{ section.id }} .collection-slider__slide.right-1 {
      transform: translate3d(130px, 0, 0) scale(0.85);
    }
  }

  @media (max-width: 360px) {
    #collection-slider-{{ section.id }} .collection-slider__slide {
      width: 200px;
      height: 320px;
    }

    #collection-slider-{{ section.id }} .collection-slider__track-container {
      height: 370px;
    }

    #collection-slider-{{ section.id }} .collection-slider__image {
      object-fit: cover;
      object-position: center;
    }
  }
  #collection-slider-{{ section.id }} .collection-slider__image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   }
</style>

<div id="collection-slider-{{ section.id }}">
  <div class="page-width">
    {%- if section.settings.title != blank or section.settings.subtitle != blank -%}
      <div class="section-header">
        {%- if section.settings.title != blank -%}
          <h2 class="section-title">{{ section.settings.title }}</h2>
        {%- endif -%}
        {%- if section.settings.subtitle != blank -%}
          <div class="section-subtitle richtext">{{ section.settings.subtitle }}</div>
        {%- endif -%}
      </div>
    {%- endif -%}

    <div class="collection-slider__container">
      <div class="collection-slider__track-container">
        <div class="collection-slider__track" id="slider-track-{{ section.id }}">
          {%- for block in section.blocks -%}
            {%- assign collection = collections[block.settings.collection] -%}
            {%- assign slide_index = forloop.index0 -%}
            {%- assign is_first = forloop.first -%}

            <div class="collection-slider__slide" data-slide-index="{{ slide_index }}">
              <a href="{{ collection.url | default: '#' }}" class="collection-slider__card">
                <div class="collection-slider__image-wrapper">
                  {%- if block.settings.image != blank -%}
                    {%- assign image = block.settings.image -%}
                    <div class="collection-slider__image-container">
                        <img
                            src="{{ image | image_url: width: 800 }}"
                            srcset="
                            {{ image | image_url: width: 300 }} 300w,
                            {{ image | image_url: width: 600 }} 600w,
                            {{ image | image_url: width: 800 }} 800w
                            "
                            sizes="(max-width: 768px) 300px, 800px"
                            alt="{{ image.alt | escape | default: collection.title | escape }}"
                            class="collection-slider__image"
                            loading="{% if is_first %}eager{% else %}lazy{% endif %}"
                            decoding="async"
                            {% if is_first %}fetchpriority="high"{% endif %}
                            width="800"
                            height="800"
                        >
                    </div>
                  {%- elsif collection and collection.image -%}
                    {%- assign image = collection.image -%}
                    <img
                      src="{{ image | image_url: width: 600 }}"
                      srcset="
                        {{ image | image_url: width: 300 }} 300w,
                        {{ image | image_url: width: 600 }} 600w,
                        {{ image | image_url: width: 800 }} 800w
                      "
                      sizes="(max-width: 768px) 300px, 600px"
                      alt="{{ collection.title | escape }}"
                      class="collection-slider__image"
                      loading="{% if is_first %}eager{% else %}lazy{% endif %}"
                      decoding="async"
                      {% if is_first %}fetchpriority="high"{% endif %}
                      width="600"
                      height="600"
                    >
                  {%- elsif collection and collection.products.first.featured_image -%}
                    {%- assign image = collection.products.first.featured_image -%}
                    <img
                      src="{{ image | image_url: width: 600 }}"
                      srcset="
                        {{ image | image_url: width: 300 }} 300w,
                        {{ image | image_url: width: 600 }} 600w,
                        {{ image | image_url: width: 800 }} 800w
                      "
                      sizes="(max-width: 768px) 300px, 600px"
                      alt="{{ collection.title | escape }}"
                      class="collection-slider__image"
                      loading="{% if is_first %}eager{% else %}lazy{% endif %}"
                      decoding="async"
                      {% if is_first %}fetchpriority="high"{% endif %}
                      width="600"
                      height="600"
                    >
                  {%- else -%}
                    <div class="collection-slider__image" style="background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); display: flex; align-items: center; justify-content: center; height: 100%;">
                      <span style="color: #999; font-size: 14px;">Collection Image</span>
                    </div>
                  {%- endif -%}
                </div>
                <div class="collection-slider__content">
                  <h3 class="collection-slider__title richtext">
                    {%- if collection -%}
                      {{ collection.title }}
                    {%- else -%}
                      {{ 'onboarding.collection_title' | t }}
                    {%- endif -%}
                  </h3>
                </div>
              </a>
            </div>
          {%- endfor -%}
        </div>
      </div>

      {%- if section.blocks.size > 1 -%}
        <div class="collection-slider__navigation">
          <button
            class="collection-slider__arrow collection-slider__arrow--prev"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
            data-slider-prev="{{ section.id }}"
            {% if section.blocks.size <= 1 %}disabled{% endif %}
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <button
            class="collection-slider__arrow collection-slider__arrow--next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
            data-slider-next="{{ section.id }}"
            {% if section.blocks.size <= 1 %}disabled{% endif %}
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

<script>
  class ElegantCarouselSlider {
    constructor(sectionId) {
      this.sectionId = sectionId;
      this.track = document.getElementById(`slider-track-${sectionId}`);
      this.prevBtn = document.querySelector(`[data-slider-prev="${sectionId}"]`);
      this.nextBtn = document.querySelector(`[data-slider-next="${sectionId}"]`);

      this.slides = this.track ? Array.from(this.track.children) : [];
      this.totalSlides = this.slides.length;
      this.currentIndex = 0;
      this.isAnimating = false;
      this.isVisible = true;

      if (this.totalSlides === 0) return;

      this.init();
      this.updateSlides();
    }

    init() {
      if (this.totalSlides === 0) return;

      if (this.prevBtn) {
        this.prevBtn.addEventListener('click', () => this.prevSlide());
      }

      if (this.nextBtn) {
        this.nextBtn.addEventListener('click', () => this.nextSlide());
      }

      // Only run the auto-slide timer while the carousel is actually on screen,
      // instead of animating (and painting) it forever in the background.
      this.setupVisibilityObserver();
      this.startAutoSlide();

      this.setupTouchEvents();
    }

    setupVisibilityObserver() {
      if (!('IntersectionObserver' in window)) return;

      const container = this.track.closest('.collection-slider__container');
      if (!container) return;

      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          this.isVisible = entry.isIntersecting;
          if (this.isVisible) {
            this.startAutoSlide();
          } else {
            this.stopAutoSlide();
          }
        });
      }, { threshold: 0.1 });

      observer.observe(container);
    }

    setupTouchEvents() {
      let touchStartX = 0;
      let touchEndX = 0;

      this.track.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
      }, { passive: true });

      this.track.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        this.handleSwipe(touchStartX, touchEndX);
      }, { passive: true });
    }

    handleSwipe(startX, endX) {
      const swipeThreshold = 50;
      const diff = startX - endX;

      if (Math.abs(diff) > swipeThreshold) {
        if (diff > 0) {
          this.nextSlide();
        } else {
          this.prevSlide();
        }
      }
    }

    updateSlides() {
      this.slides.forEach(slide => {
        slide.classList.remove('active', 'left-1', 'left-2', 'left-3', 'right-1', 'right-2', 'right-3');
      });

      this.slides[this.currentIndex].classList.add('active');

      for (let i = 1; i <= 3; i++) {
        const leftIndex = (this.currentIndex + i) % this.totalSlides;
        if (leftIndex !== this.currentIndex) {
          this.slides[leftIndex].classList.add(`left-${i}`);
        }
      }

      for (let i = 1; i <= 3; i++) {
        const rightIndex = (this.currentIndex - i + this.totalSlides) % this.totalSlides;
        if (rightIndex !== this.currentIndex) {
          this.slides[rightIndex].classList.add(`right-${i}`);
        }
      }
    }

    prevSlide() {
      if (this.isAnimating || this.totalSlides <= 1) return;

      this.isAnimating = true;
      this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
      this.updateSlides();

      setTimeout(() => {
        this.isAnimating = false;
      }, 600);
    }

    nextSlide() {
      if (this.isAnimating || this.totalSlides <= 1) return;

      this.isAnimating = true;
      this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
      this.updateSlides();

      setTimeout(() => {
        this.isAnimating = false;
      }, 600);
    }

    startAutoSlide() {
      if (this.totalSlides <= 1 || this.autoSlideInterval) return;

      this.autoSlideInterval = setInterval(() => {
        if (!this.isAnimating) {
          this.nextSlide();
        }
      }, 5000);
    }

    stopAutoSlide() {
      if (this.autoSlideInterval) {
        clearInterval(this.autoSlideInterval);
        this.autoSlideInterval = null;
      }
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const sliders = document.querySelectorAll('.collection-slider__container');

    sliders.forEach((container) => {
      const sectionId = container.closest('[id^="shopify-section-"]')?.id?.replace('shopify-section-', '');
      if (sectionId) {
        new ElegantCarouselSlider(sectionId);
      }
    });
  });
</script>

{% schema %}
{
  "name": "3D Collection Carousel",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "richtext",
      "id": "title",
      "label": "Section title",
      "default": "<p>SIGNATURE COLLECTIONS</p>"
    },
    {
      "type": "richtext",
      "id": "subtitle",
      "label": "Section subtitle",
      "default": "<p>Discover our exclusive collections</p>"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "enable_shadow",
      "label": "Enable card shadow",
      "info": "Turn off to remove shadows from slides and arrows.",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_border",
      "label": "Enable card border",
      "default": true
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#e5e5e5"
    },
    {
      "type": "range",
      "id": "border_width",
      "label": "Border width",
      "min": 1,
      "max": 10,
      "step": 1,
      "unit": "px",
      "default": 1
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "label": "Card border radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 80
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 80
    },
    {
      "type": "color",
      "id": "arrow_background",
      "label": "Arrow background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "arrow_border_color",
      "label": "Arrow border color",
      "default": "#e5e5e5"
    },
    {
      "type": "color",
      "id": "arrow_background_hover",
      "label": "Arrow background color (hover)",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "arrow_color_hover",
      "label": "Arrow color (hover)",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "arrow_border_color_hover",
      "label": "Arrow border color (hover)",
      "default": "#333333"
    }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Custom image",
          "info": "Optional. Uses collection image by default."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "3D Collection Carousel",
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }
  ]
}
{% endschema %}