Splideを使ったスライドショーで画像をクリックする方法

日本語 ディスカッション 技術的なQ＆A
, ,
1

Splideの動作が軽いためCDNを利用してスライドショーを作っています。

こちらを参考にしました。

https://www.ryoma.online/shopify-implement-slider-with-cut-off-sides/

画像がスライドしていくセクションは実現できたのですが、画像をクリックして任意のページやコレクションに飛ばしたいのですが方法を教えて頂きたいです。

よろしくお願いします。

splide-slide-show.liquid

<style>
  .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
  }
</style>

<div class="splide" 
     role="group" 
     aria-label="{{ section.settings.slider_label }}">
  <div class="splide__track">
    <ul class="splide__list">
      {%- if section.settings.slide_1_image != blank -%}
        <li class="splide__slide">
          <img src="{{ section.settings.slide_1_image | img_url: 'master' }}"
               alt="{{ section.settings.slide_1_text }}"
               loading="lazy"
               width="100%"
               height="auto">
        </li>
      {%- endif -%}
      
      {%- if section.settings.slide_2_image != blank -%}
        <li class="splide__slide">
          <img src="{{ section.settings.slide_2_image | img_url: 'master' }}"
               alt="{{ section.settings.slide_2_text }}"
               loading="lazy"
               width="100%"
               height="auto">
        </li>
      {%- endif -%}
      
      {%- if section.settings.slide_3_image != blank -%}
        <li class="splide__slide">
          <img src="{{ section.settings.slide_3_image | img_url: 'master' }}"
               alt="{{ section.settings.slide_3_text }}"
               loading="lazy"
               width="100%"
               height="auto">
        </li>
      {%- endif -%}
    </ul>
  </div>
</div>

{{ 'splide.min.js' | asset_url | script_tag }}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    new Splide('.splide', {
      autoplay: true,
      type: 'loop',
      pauseOnHover: false,
      pauseOnFocus: false,
      interval: 5000,
      speed: 3000,
      padding: '20%',
      gap: 20,
      breakpoints: {
        749: {
          perPage: 1,
          padding: 0
        }
      }
    }).mount();
  });
</script>

{% schema %}
{
  "name": "Splide Slider",
  "settings": [
    {
      "type": "text",
      "id": "slider_label",
      "label": "スライドショーのラベル",
      "default": "特集を紹介するスライド"
    },
    {
      "type": "image_picker",
      "id": "slide_1_image",
      "label": "特集1の画像"
    },
    {
      "type": "image_picker",
      "id": "slide_2_image",
      "label": "特集2の画像"
    },
    {
      "type": "image_picker",
      "id": "slide_3_image",
      "label": "特集3の画像"
    }
  ],
  "presets": [
    {
      "name": "見切れる特集スライダー"
    }
  ]
}
{% endschema %}