Shopify多列区块添加Splide.js滑块功能故障求助

需求：大屏设备下每组显示3个列项作为单张幻灯片，点击箭头切换至下一组，当前使用Splide.js但未达到预期效果。

现有代码 #

footer-multicolumn.liquid #

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer-multicolumn.css' | asset_url | stylesheet_tag }}
<script src="{{ 'splide.min.js' | asset_url }}" defer></script>
{{ 'splide.min.css' | asset_url | stylesheet_tag }}

<div class="dawn-footer-multicolumn">
  <div class="section-content">
    <div class="slider">
      <div class="slides">
        {% for block in section.blocks %}
          <div class="slide">
            <a href="{{ block.settings.link }}">
              <img src="{{ block.settings.myImage | img_url: 'master' }}">
            </a>
            <h2>
              <a href="{{ block.settings.link }}">{{ block.settings.title }}</a>
            </h2>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class="slider-arrows">
  <span class="arrow prev">&lt;</span>
  <span class="arrow next">&gt;</span>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const slides = document.querySelectorAll('.slide');
    const prevArrow = document.querySelector('.slider-arrows .prev');
    const nextArrow = document.querySelector('.slider-arrows .next');
    let currentIndex = 0;

    prevArrow.addEventListener('click', () => {
      if (currentIndex > 0) {
        currentIndex--;
      } else {
        currentIndex = slides.length - 1;
      }
      updateSlideVisibility();
    });

    nextArrow.addEventListener('click', () => {
      if (currentIndex < slides.length - 1) {
        currentIndex++;
      } else {
        currentIndex = 0;
      }
      updateSlideVisibility();
    });

    function updateSlideVisibility() {
      slides.forEach((slide, index) => {
        if (index >= currentIndex && index < currentIndex + 3) {
          slide.style.display = 'block';
        } else {
          slide.style.display = 'none';
        }
      });
    }

    updateSlideVisibility();
  });
</script>

{% schema %}
{
  "name": "Footer - Multicolumn",
  "settings": [],
  "blocks": [
    {
      "type": "multicolumn_section",
      "name": "Multicolumn Section",
      "settings": [
        {
          "type": "image_picker",
          "label": "Select Image",
          "id": "myImage"
        },
        {
          "type": "text",
          "label": "Title",
          "id": "title"
        },
        {
          "type": "url",
          "label": "Link",
          "id": "link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Footer - Multicolumn",
      "category": "Custom"
    }
  ]
}
{% endschema %}

配套CSS #

.dawn-footer-multicolumn {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.multicolumn-section {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}

.slider {
  width: 100%;
}

.slides {
  display: flex;
}

.slide {
  flex-basis: calc(33.33% - 20px); /* Adjust the spacing between slides */
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.slide a {
  display: block;
  text-decoration: none;
  color: black;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.slide h2 {
  margin-top: 10px;
}

.slider-arrows {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.slider-arrows .arrow {
  margin: 0 10px;
  background-color: #ccc;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.slider-arrows .arrow:hover {
  background-color: #aaa;
}

问题分析 #

1. 未使用Splide.js的标准结构与初始化逻辑，自行编写的原生JS切换逻辑错误（每次仅移动1个slide而非整组3个）
2. 布局未处理溢出，导致所有slide挤在一行，无法形成滑块效果

修正后的代码 #

1. 调整footer-multicolumn.liquid（适配Splide标准结构） #

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer-multicolumn.css' | asset_url | stylesheet_tag }}
<script src="{{ 'splide.min.js' | asset_url }}" defer></script>
{{ 'splide.min.css' | asset_url | stylesheet_tag }}

<div class="dawn-footer-multicolumn">
  <div class="section-content">
    <!-- Splide标准结构 -->
    <div class="splide" role="group" aria-label="多列滑块">
      <div class="splide__track">
        <ul class="splide__list">
          {% for block in section.blocks %}
            <li class="splide__slide">
              <a href="{{ block.settings.link }}">
                <img src="{{ block.settings.myImage | img_url: 'master' }}">
              </a>
              <h2>
                <a href="{{ block.settings.link }}">{{ block.settings.title }}</a>
              </h2>
            </li>
          {% endfor %}
        </ul>
      </div>
      <!-- Splide内置箭头容器 -->
      <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev">&lt;</button>
        <button class="splide__arrow splide__arrow--next">&gt;</button>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // 初始化Splide，配置每组3个、每次切换整组
    new Splide( '.splide', {
      type   : 'slide',
      perPage: 3,
      perMove: 3,
      gap    : '20px',
      arrows : true,
      pagination: false,
      // 响应式适配
      breakpoints: {
        768: {
          perPage: 2,
          perMove: 2,
        },
        480: {
          perPage: 1,
          perMove: 1,
        }
      }
    } ).mount();
  });
</script>

{% schema %}
{
  "name": "Footer - Multicolumn",
  "settings": [],
  "blocks": [
    {
      "type": "multicolumn_section",
      "name": "Multicolumn Section",
      "settings": [
        {
          "type": "image_picker",
          "label": "Select Image",
          "id": "myImage"
        },
        {
          "type": "text",
          "label": "Title",
          "id": "title"
        },
        {
          "type": "url",
          "label": "Link",
          "id": "link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Footer - Multicolumn",
      "category": "Custom"
    }
  ]
}
{% endschema %}

2. 调整CSS（适配Splide类名） #

.dawn-footer-multicolumn {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.section-content {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

/* 自定义Splide箭头样式 */
.splide__arrow {
  background-color: #ccc;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.splide__arrow:hover {
  background-color: #aaa;
}

.splide__slide {
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.splide__slide a {
  display: block;
  text-decoration: none;
  color: black;
}

.splide__slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.splide__slide h2 {
  margin-top: 10px;
}

修改说明 #

• 采用Splide.js标准HTML结构，利用其内置的滑块逻辑
• 初始化时配置perPage:3和perMove:3，实现每组3个、切换整组的效果
• 移除自行编写的原生JS控制逻辑，简化代码
• 保留原有样式风格，适配Splide类名并添加响应式断点

内容的提问来源于stack exchange，提问作者Taylor Swift