多个光滑问题

【问题标题】：Multiple slick issue多个光滑问题
【发布时间】：2025-12-23 03:00:11
【问题描述】：

我在页面上有多个光滑的滑块，其中包含不同数量的项目。如果项目长度> = 3，则必须启动光滑的滑块。我不知道如何解决这个问题。下面是代码示例：

<div class="diploma-carousel">
 <div class="diploma-carousel-list">
  <div class="diploma-carousel-item">
  </div>
  <div class="diploma-carousel-item">
  </div>
  <div class="diploma-carousel-item">
  </div>
  <div class="diploma-carousel-item">
  </div>
 </div>

 <div class="diploma-carousel-list">
  <div class="diploma-carousel-item">
  </div>
  <div class="diploma-carousel-item">
  </div>
 </div>

 <div class="diploma-carousel-list">
  <div class="diploma-carousel-item">
  </div>
  <div class="diploma-carousel-item">
  </div>
 </div>
</div>

 $('.diploma-carousel-list').each(function(item) {
     let sliderItems = $(this).find('.diploma-carousel-item');
     let sliderItemsLength = sliderItems.length;
     if (sliderItemsLength >= 3) {
        $(this).parent().closest().slick();
     }
});

感谢您的帮助。

【问题讨论】：

标签： jquery slider slick.js

【解决方案1】：

函数中的 $(this) 是 each() 循环的当前迭代中具有 CSS 类 .diploma-carousel-list 的元素。
$(this).parent() 因此是 CSS 类 .diploma-carousel 的容器。
$(this).parent().closest() 将是 <div class="diploma-carousel"> 的祖先（未在您的示例代码中显示）

您可能希望将 Slick Slider 直接应用于 diploma-carousel-list 元素，只需使用 $(this).slick(); 而不是 $(this).parent().closest().slick(); 就可以了。

编辑： $(this).parent().closest() 绝对不选择任何内容，因为closest() 向上移动 DOM 并返回第一个元素 - 包括当前元素 - 与给定选择器匹配。使用不带任何参数的 closest() 只会返回一个空的 jQuery 对象。请参阅https://api.jquery.com/closest/ 了解更多信息。

【讨论】：