Splideを使ったスライドショーの画像にリンクを貼る

[watanabe1]

なぜか投稿するとスパム認定になったので、もう一度投稿します。（なぜだろう）

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

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

よろしくお願いします。

現在の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 %}

[株式会社フルバランス · Accepted solution]

質問拝見しました。

以下回答になります。

画像をクリックして任意のページやコレクションに遷移させたい場合は、<img> タグを <a> タグで囲んでリンクを設定する形にすればOKです。

以下のように、画像ごとにリンク先の設定項目（slide_1_linkなど）を settings に追加します。

<ul class="splide__list">
  {%- if section.settings.slide_1_image != blank -%}
    <li class="splide__slide">
      <a href="{{ section.settings.slide_1_link | default: '#' }}">  ←追加コード
        <img src="{{ section.settings.slide_1_image | img_url: 'master' }}"
             alt="{{ section.settings.slide_1_text }}"
             loading="lazy"
             width="100%"
             height="auto">
      </a>
    </li>
  {%- endif -%}

以上のように<a>タグで囲めばリンクを設置できます。

スキーマの方にも各リンクを設定できるように下記を設定ください。

{
  "type": "url",
  "id": "slide_1_link",
  "label": "特集1のリンク"
},

上記コード編集によりカスタマイズ画面から各スライドのリンク先を設定することができます！

ご参考にしていただけますと幸いです。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

[watanabe1]

いつもありがとうございます！

希望通りの動作になりました、ありがとうございました！