Glide.js を使用して Shopify テーマに商品リストのカルーセルを実装する

{% comment %}
  セクション設定で指定したコレクションを collection 変数に追加
{% endcomment %}
{%- assign collection = collections[section.settings.collection] -%}

<div class="glide" id="glideProductCarousel">
  <div class="glide__container">
    {% comment %}
      Glide.js の矢印ボタンを表示
    {% endcomment %}
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
    </div>

    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        {% comment %}
          Shopify デフォルトテーマ「Debut」に標準で入っている `product-card-grid` コンポーネントを `glide__slides` class で囲み商品を表示
        {% endcomment %}
        {% for product in collection.products limit: product_limit %}
          <li class="grid__item small--one-half medium-up--one-quarter">
            {% include 'product-card-grid', max_height: 250, product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

{% schema %}
{
  "name": {
    "ja": "商品カルーセル"
  },
  "settings": [
    {
      "id": "collection",
      "type": "collection",
      "label": {
        "ja": "コレクション"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "ja": "商品カルーセル"
      },
      "category": {
        "ja": "コレクション"
      }
    }
  ]
}{% endschema %}

document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('glideProductCarousel')) {
    new Glide('#glideProductCarousel', {
      type: 'carousel', // カルーセルが一画面でループする設定。`type: 'slider'` ではスライドが末端に到達してから巻き戻る
      startAt: 0, // 要素の何番目から表示するか
      perView: 4, // 一画面に要素を何個表示するか
      autoplay: 4000, // 自動でカルーセルが次の要素へ遷移する秒数 (0で遷移しない)
      hoverpause: true, // autoplay 有効時にカルーセルを停止するか
      breakpoints: {
        "768": { // 画面幅を指定することで指定以下の画面幅時の設定を追加できる
          perView: 2,
        },
      }
    }).mount()
  }
});