アナウンスメントバー（カルーセル表示）

<section 
  id="announcement-bar-{{ section.id }}" 
  class="
    announcement-bar 
    {{ section.settings.bg_color }} 
    {{ section.settings.bg_gradient }}
    {{ section.settings.text_color }}
    {{ section.settings.border_top_width | prepend: 'border-top-' }}
    {{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
    {{ section.settings.border_color }} 
    {{ section.settings.font_size }} 
    {{ section.settings.font_size_desktop }} 
    {{ section.settings.text_transform }} 
    {{ section.settings.letter_spacing | prepend: 'ls-' }} 
  "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  ">
  <div class="container">
    <div 
      id="carousel-{{ section.id }}" 
      class="carousel slide " 
      data-bs-ride="{% if section.settings.carousel_autoplay > 0 %}carousel{% else %}false{% endif %}"
      data-bs-interval="{{ section.settings.carousel_autoplay | times: 1000 }}"
      aria-label="{{ 'general.accessibility.announcements' | t }}"
      style="max-width: {{ section.settings.container_max_width }}px;">
      <div class="carousel-inner">
        {% for block in section.blocks %}
          <div 
            class="
              carousel-item 
              {{ section.settings.pt | prepend: 'pt-' }} 
              {{ section.settings.pb | prepend: 'pb-' }}
              {% if forloop.first %}active{% endif %}
            " 
            data-index="{{ forloop.index0 }}" 
            {{ block.shopify_attributes }}>
            <div class="description rte lh-sm">
              {{ block.settings.announcement }}
            </div>
          </div>
        {% endfor %}
      </div>
      {% if section.blocks.size > 1 %}
        <button 
          class="carousel-control carousel-control-prev" 
          type="button" 
          data-bs-target="#carousel-{{ section.id }}" 
          data-bs-slide="prev"
          aria-label="{{ 'general.accessibility.previous' | t }}">
          {% render 'svg-icons', icon: 'chevron-left', size: 22 %}
        </button>
        <button 
          class="carousel-control carousel-control-next" 
          type="button" 
          data-bs-target="#carousel-{{ section.id }}" 
          data-bs-slide="next"
          aria-label="{{ 'general.accessibility.next' | t }}">
          {% render 'svg-icons', icon: 'chevron-right', size: 22 %}
        </button>
      {% endif %}
    </div>
  </div>
</section>

{% if request.design_mode %}
  <script>
    document.addEventListener('shopify:block:select', (event) => {
      const carousel = event.target.closest('#carousel-{{ section.id }}')
    
      if (carousel) {
        bootstrap.Carousel.getOrCreateInstance(carousel, { ride: false })
          .to(event.target.dataset.index)
      }
    })
  </script>
{% endif %}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "header",
      "content": "Styling"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background color",
      "default": "bg-body",
      "options": [
        { "value": "bg-primary", "label": "Primary" },
        { "value": "bg-secondary", "label": "Secondary" },
        { "value": "bg-body", "label": "Body" },
        { "value": "bg-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "bg_opacity",
      "label": "Background opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "bg_gradient",
      "label": "Background gradient",
      "options": [
        { "value": "bg-gradient", "label": "Yes" },
        { "value": "", "label": "No" }
      ],
      "default": ""
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "default": "text-body",
      "options": [
        { "value": "text-primary", "label": "Primary" },
        { "value": "text-secondary", "label": "Secondary" },
        { "value": "text-body", "label": "Body" },
        { "value": "text-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_top_width",
      "label": "Border top width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_bottom_width",
      "label": "Border bottom width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "border_color",
      "label": "Border color",
      "default": "border-body",
      "options": [
        { "value": "border-primary", "label": "Primary" },
        { "value": "border-secondary", "label": "Secondary" },
        { "value": "border-body", "label": "Body" },
        { "value": "border-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_opacity",
      "label": "Border opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "text",
      "id": "container_max_width",
      "label": "Container max-width (px)",
      "info": "Leave empty to use the global container width",
      "default": "600"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "select",
      "id": "font_size",
      "label": "Font size - mobile",
      "default": "fs-sm",
      "options": [
        { "value": "fs-xs", "label": "xs" },
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xl", "label": "xl" }
      ]
    },
    {
      "type": "select",
      "id": "font_size_desktop",
      "label": "Font size - desktop",
      "default": "fs-desktop-sm",
      "options": [
        { "value": "fs-desktop-xs", "label": "xs" },
        { "value": "fs-desktop-sm", "label": "sm" },
        { "value": "fs-desktop-md", "label": "md" },
        { "value": "fs-desktop-lg", "label": "lg" },
        { "value": "fs-desktop-xl", "label": "xl" }
      ]
    },
    {
      "type": "select",
      "id": "text_transform",
      "label": "Text transform",
      "default": "text-capitalize",
      "options": [
          { "value": "", "label": "Normal" },
          { "value": "text-capitalize", "label": "Capitalize" },
          { "value": "text-lowercase", "label": "Lowercase" },
          { "value": "text-uppercase", "label": "Uppercase" }

      ]
    },
    {
      "type": "range",
      "id": "letter_spacing",
      "label": "Letter spacing",
      "default": 0,
      "min": 0,
      "max": 5
    },
    {
      "type": "header",
      "content": "Carousel"
    },
    {
      "type": "range",
      "id": "carousel_autoplay",
      "label": "Autoplay",
      "min": 0,
      "max": 10,
      "default": 5,
      "unit": "sec",
      "info": "Selecing \"0\" will disable autoplay."
    },
    {
      "type": "checkbox",
      "id": "carousel_vertical",
      "label": "Vertical sliding",
      "info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)",      
      "default": true
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Padding bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 3
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "announcement",
          "label": "Announcement",
          "default": "Announce something important here"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Announcement bar",
      "blocks": [
        {
          "type": "slide",
          "settings": {
            "announcement": "Announce something important here"
          }
        },
        {
          "type": "slide",
          "settings": {
            "announcement": "Free shipping over $100 USD"
          }
        }
      ]
    }
  ]
}
{% endschema %}