如何创建特色收藏夹手动滑块？

Question

我正在创建一个新的Shopify商店，我在Fashionnova上看到了他们如何在其网站底部使用令人惊叹的手动滑块，而且我想知道如何做到这一点。谢谢您抽出宝贵的时间，我非常感激：）

Featured Collection standard without hand slider

这是我在Shopify主题编辑器中featured-collection.liquid下找到的代码

{% assign featured = section.settings.featured_collection %}
{% assign products_per_row = section.settings.num_per_row %}
{% assign rows = section.settings.num_rows %}
{% assign total_products = products_per_row | times: rows %}

<div data-section-id="{{ section.id }}" data-section-type="featured-products-section">
  {% unless section.settings.title == blank %}
  <div class="section-header section-header--small">
    <center><p style="font-size:25px;font-weight:bold" class="section-header__title">
      {{ section.settings.title | escape }}
      </p></center>
  </div>
  {% endunless %}

  {% case products_per_row %}
    {% when 3 %}
      {% assign grid_item_width = 'medium--one-third post-large--one-third' %}
      {%- assign product_width = 410 -%}
    {% when 4 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-quarter' %}
      {%- assign product_width = 335 -%}
    {% when 5 %}
      {% assign grid_item_width = 'medium-down--one-half post-large--one-fifth' %}
      {%- assign product_width = 335 -%}
  {% endcase %}

  <div class="grid-uniform">
    {% for product in collections[featured].products limit: total_products %}
      {% assign featured = product %}
      <div class="grid__item {{grid_item_width}}" {{ block.shopify_attributes }}>
        {% include 'product-grid-item' %}
      </div>
    {% else %}
      <div class="grid__item">
        <div class="helper-section">
          <div class="grid-uniform helper-content">
            {% for i in (1..total_products) %}
              <div class="grid__item {{grid_item_width}}">
                <a href="/admin/products" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">
                  <span class="grid-link__image">
                    <span class="grid-link__image-centered">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
  {
    "name": "Featured collection",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Featured collection"
      },
      {
        "type": "collection",
        "id": "featured_collection",
        "label": "Collection"
      },
      {
        "type": "range",
        "id": "num_per_row",
        "label": "Products per row",
        "min": 3,
        "max": 5,
        "step": 1,
        "default": 3
      },

      {
        "type": "range",
        "id": "num_rows",
        "label": "Rows",
        "min": 1,
        "max": 6,
        "step": 1,
        "default": 1
      },
      {
        "type": "checkbox",
        "id": "vendor_enable",
        "label": "Show product vendor"
      },
      {
        "type": "checkbox",
        "id": "show_sale_circle",
        "label": "Show 'Sale' circle"
      },
      {
        "type": "checkbox",
        "id": "show_sold_out_circle",
        "label": "Show 'Sold out' circle"
      },
      {
        "type": "checkbox",
        "id": "center_grid_link",
        "label": "Center text below product images"
      }
    ],
    "presets": [
      {
        "name": "Featured collection",
        "category": "Collection",
        "settings":
        {
          "title": "Featured collection",
          "featured_collection": "frontpage"
        }
      }
    ]
  }
{% endschema %}