ブログ記事スライダー

{% capture empty_state %}
  {% for num in (1..6) %}
    <div class="swiper-slide p-3 p-desktop-4">
      <div class="article-card text-center">
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        {{ 'collection-' | append: current | placeholder_svg_tag: 'img-thumbnail mb-4' }}
        <h3 class="article-card-title mb-0 fs-xl">
          Article title {{ current }}
        </h3>
      </div>
    </div>
  {% endfor %}
{% endcapture %}

<swiper-slider
  id="blog-slider-{{ section.id }}" 
  class="
    blog-slider swiper-slider
    {{ 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.pt | prepend: 'pt-' }} 
    {{ section.settings.pb | prepend: 'pb-' }}
  "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  "
  data-section-id="{{ section.id }}"
  data-slider-speed="{{ section.settings.slider_speed }}"
  data-slider-navigation="{{ section.settings.slider_navigation }}"
  data-slider-pagination="{{ section.settings.slider_pagination }}"
  data-slider-scrollbar="{{ section.settings.slider_scrollbar }}"
  data-slider-autoplay="{{ section.settings.slider_autoplay }}"
  data-breakpoint-mobile="{{ section.settings.breakpoint_mobile }}"
  data-breakpoint-tablet="{{ section.settings.breakpoint_tablet }}"
  data-breakpoint-desktop="{{ section.settings.breakpoint_desktop }}">
  <div 
    class="container"
    style="max-width: {{ section.settings.container_max_width | append: 'px' }};">
    {% render 'section-header' %}
    <div class="swiper mx-n3 mx-desktop-n4 mt-n3 mt-desktop-n4">
      <div class="swiper-wrapper">
        {% if section.blocks.size > 0 %}
          {% for block in section.blocks %} 
            <div class="swiper-slide p-3 p-desktop-4">
              {% render 'article-card' article: block.settings.article  %}
            </div>
          {% endfor %}
        {% elsif section.settings.blog != nil %}
          {% for article in section.settings.blog.articles %}
            <div class="swiper-slide p-3 p-desktop-4">
              {% render 'article-card' article: article  %}
            </div>
          {% endfor %}
        {% else %}
          {{ empty_state }}
        {% endif %}
      </div>
      <div class="swiper-controls">
        <div class="swiper-pagination"></div>
        <div class="swiper-scrollbar"></div>
        <div class="swiper-button-prev">
          {% render 'svg-icons', icon: 'chevron-left', size: 24 %}
        </div>
        <div class="swiper-button-next">
          {% render 'svg-icons', icon: 'chevron-right', size: 24 %}
        </div>
      </div>
    </div>
  </div>
</swiper-slider>

{% schema %}
{
  "name": "Blog slider",
  "tag": "section",
  "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"
    },
    {
      "type": "header",
      "content": "Header"
    },
    {
      "type": "text",
      "id": "header_title",
      "label": "Title",
      "default": "Latest Posts"
    },
    {
      "type": "select",
      "id": "header_title_font_size",
      "label": "Title font-size",
      "default": "h2",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "h4", "label": "H4" },
        { "value": "h5", "label": "H5" },
        { "value": "h6", "label": "H6" }
      ]
    },
    {
      "type": "richtext",
      "id": "header_description",
      "label": "Description (optional)",
      "default": "<p>Add on optional description for this section</p>"
    },
    {
      "type": "select",
      "id": "header_description_font_size",
      "label": "Description font-size",
      "default": "fs-md",
      "options": [
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xl", "label": "xl" },
        { "value": "fs-xxl", "label": "xxl" }
      ]
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "range",
      "id": "slider_speed",
      "label": "Speed",
      "default": 300,
      "min": 0,
      "max": 2000,
      "step": 100,
      "unit": "ms"
    },
    {
      "type": "checkbox",
      "id": "slider_navigation",
      "label": "Show navigation (arrows)",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "slider_pagination",
      "label": "Show pagination",
      "default": true
    },
    {
      "type": "select",
      "id": "slider_pagination_type",
      "label": "Pagination type",
      "default": "bullets", 
      "options": [
        { "value": "bullets", "label": "Bullets" },
        { "value": "fraction", "label": "Fraction" }
      ],
      "info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)"
    },
    {
      "type": "checkbox",
      "id": "slider_scrollbar",
      "label": "Show scrollbar",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "slider_partial_slides_mobile",
      "label": "Partial slides on mobile",
      "default": false,
      "info": "NOTE: This feature is supported only in our Premium Shopify Themes. [Browse premium themes](https://www.kondasoft.com/collections/shopify-themes)"
    },
    {
      "type": "range",
      "id": "slider_autoplay",
      "label": "Autoplay",
      "min": 0,
      "max": 10,
      "default": 0,
      "unit": "sec",
      "info": "Selecing \"0\" will disable autoplay."
    },
    {
      "type": "header",
      "content": "Blog"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "Blog",
      "info": "Note: By default, it will show the latest blog articles. If you prefer to show individual articles instead, add each article as a block in this section."
    },
    {
      "type": "range",
      "id": "limit",
      "label": "Limit articles",
      "min": 2,
      "max": 24,
      "default": 8,
      "step": 1
    },
    {
      "type": "header",
      "content": "Article card"
    },
    {
      "type": "select",
      "id": "article_card_text_align",
      "label": "Text align",
      "default": "text-center",
      "options": [
        { "value": "text-start", "label": "Left" },
        { "value": "text-center", "label": "Center" }
      ]
    },
    {
      "type": "select",
      "id": "article_card_img_orientation",
      "label": "Image orientation",
      "default": "ratio-4x3",
      "options": [
        { "group": "Adapt", "value": "adapt", "label": "Adapt" },
        { "group": "Square", "value": "ratio-1x1", "label": "1x1" },
        { "group": "Horizontal", "value": "ratio-4x3", "label": "4x3" },
        { "group": "Horizontal", "value": "ratio-16x9", "label": "16x9" },
        { "group": "Horizontal", "value": "ratio-21x9", "label": "21x9" }
      ]
    },
    {
      "type": "select",
      "id": "article_card_img_border",
      "label": "Image border",
      "default": "img-thumbnail",
      "options": [
        { "value": "", "label": "None" },
        { "value": "rounded", "label": "Rounded" },
        { "value": "img-thumbnail", "label": "Thumbnail" }
      ]
    },
    {
      "type": "select",
      "id": "article_card_title_size",
      "label": "Title font-size",
      "default": "fs-xl",
      "options": [
        { "value": "fs-sm", "label": "sm" },
        { "value": "fs-md", "label": "md" },
        { "value": "fs-lg", "label": "lg" },
        { "value": "fs-xl", "label": "xl" },
        { "value": "fs-xxl", "label": "xxl" }
      ]
    },
    {
      "type": "checkbox",
      "id": "article_card_meta",
      "label": "Show author/date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "article_card_tags",
      "label": "Show tags",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "article_card_excerpt",
      "label": "Show excerpt",
      "default": true
    },
    {
      "type": "header",
      "content": "Breakpoints",
      "info": "Adjust items per slide based on the screen resolution"
    },
    {
      "type": "range",
      "id": "breakpoint_mobile",
      "label": "Mobile (<600px)",
      "min": 1,
      "max": 3,
      "step": 1,
      "default": 1
    },
    {
      "type": "range",
      "id": "breakpoint_tablet",
      "label": "Tablet (≥600px)",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 2
    },
    {
      "type": "range",
      "id": "breakpoint_desktop",
      "label": "Desktop (≥1200px)",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 4
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    }
  ],
  "blocks": [
    {
      "type": "article",
      "name": "Article",
      "settings": [
        {
          "type": "article",
          "id": "article",
          "label": "Article"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "presets": [
    {
      "name": "Blog slider"
    }
  ]
}
{% endschema %}