Shopify - 添加滑块功能

Question

我创建了一个多列部分，我想在其中添加滑块功能。但我没有得到想要的结果。我正在使用 Splide Js 库。在大屏幕上，它应该显示 3 列作为一张幻灯片，当单击箭头时，它会移动到下一张幻灯片

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;
}

我是新手，请合作

Answer 1

考虑到你作为国际大明星的专业职责，我很惊讶你自己制作了这个作品，但是……顺便说一句，让我们进入正题吧……

阅读您的代码时我注意到的第一件事是：

1. 您没有使用建议的结构。在

   [Structure section][1]

   中，Splide 告诉您为轮播使用特定的结构：

   <section class="splide" aria-label="Basic Structure Example">
     <div class="splide__track">
       <ul class="splide__list">
         <li class="splide__slide">Slide 01</li>
         <li class="splide__slide">Slide 02</li>
         <li class="splide__slide">Slide 03</li>
       </ul>
      </div>
   </section>
   

   您可以使用

   <div>

   代替部分和列表标签，但您必须使用所有

   splide__???

   类，并且必须遵守特定的顺序。

   例如，您可以在根元素（具有

   splide

   类的元素）和 track 元素（具有

   splide__track

   类的元素）之间放置其他子元素，但不能在 track 元素和 track 元素之间放置任何内容列表元素（具有

   splide__list

   类的元素）。

   所以你可以这样做：

   <section class="splide" aria-label="Restriction Example">
     <div>
       <div>
         <div>
           <div class="splide__track">
             <ul class="splide__list">
   

   但你不能这样做：

   <section class="splide" aria-label="Incorrect Structure Example">
     <div class="splide__track">
       <div>
         <ul class="splide__list">
   

2. 第二件事，也是更重要的事情，是在创建正确的结构之后，必须将 Splide 应用于该结构的根元素，否则 splide 将永远无法工作。因此，假设您有一个类似于我之前向您展示的基本结构的结构：

    <section class="splide" aria-label="Basic Structure Example">
     <div class="splide__track">
      <ul class="splide__list">
       <li class="splide__slide">Slide 01</li>
       <li class="splide__slide">Slide 02</li>
       <li class="splide__slide">Slide 03</li>
      </ul>
     </div>
    </section>
   

   在你的 JavaScript 代码中，你必须编写如下内容：

    document.addEventListener( 'DOMContentLoaded', function() {  // Make sure your element has been created
   
     var splide = new Splide( '.splide' );  // Construct the Splide object passing the class of the carousel's root element
     splide.mount();  // Initialize the splide instance. 
   
    });
   

如果您遵循这些规则，您将获得一个基本的滑块。如果您想要对功能进行更多控制，例如使用循环轮播而不是滑块、启用自动播放和许多其他功能，则必须将选项对象传递给构造函数。您可以在[此处][2]找到操作方法以及选项列表。选项还可以通过设置为滑块/轮播的根元素的数据属性传递。