多个光滑的问题

Question

我在页面上有多个光滑的滑块，其中包含不同数量的项目。如果项目的长度 >= 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();
     }
});

感谢您的帮助。

Answer 1

$(this) 在你的函数中是 CSS class .diploma-carousel-list 来自你的 each() 循环的当前迭代的元素。
$(this).parent() 因此是带有 CSS class .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 和 returns 第一个元素 - 包括当前元素 - 匹配给定的选择器 。使用不带任何参数的 closest() 只是 returns 一个空的 jQuery 对象。有关详细信息，请参阅 https://api.jquery.com/closest/。

多个光滑的问题

Multiple slick issue

jquery

slider

slick.js