【保存版】Shopifyで差をつける！左右が見切れているスライダーの実装方法

2024年6月22日2024年11月11日

左右が見切れているスライダーの実装方法

こんにちは！Shopifyエンジニアのりょうま(@ryoo_black)です。

「デフォルトのスライダーじゃ物足りない…」
「クライアントからもっとユニークなデザインにしてほしいと言われた…」
「他のショップと差別化したい…」

このような悩みをお持ちの方も多いのではないでしょうか？

今回は、見栄えの良い「左右が見切れているスライダー」の実装方法を紹介します。

たった3ステップで完成しますので初心者の方でも簡単に実装できます。

スライダーはサイトの印象を大きく左右します。
この方法を使えば、あなたのサイトを他と差別化できるはずですのでぜひ参考にしてみてください。

完成イメージ

下記のような、左右に次の画像が見切れて表示されるスライダーを実装していきます。

実装方法

Step1:theme.liquidにCDN追加

まずはtheme.liquidにCDNを追加します。
今回使用するスライダープラグインはSplideです。

下記のSplideの公式ページからCDNをコピーしてきます。

Step2:スライド用のliquidを追加

次にスライダーセクションを設置します。

「セクション」→「新しいセクションを追加する」を選択してください。

「新しいセクションを追加する」を選択する参考画像 — 「新しいセクションを追加する」を選択

任意の名前をつけてください。
ここでは「splide.liquid」とします。

splide.liquidを作成する参考画像 — splide.liquidを作成

作成した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: 2000,
      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 %}

コードを追加できたら右上の「保存」を押して保存してください。