时间戳

首页 > 解决方案 > 多个光滑问题

jquery - 多个光滑问题

问题描述

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

感谢您的任何帮助。

标签： jquerysliderslick.js

解决方案

  • $(this).diploma-carousel-list在您的函数中是当前循环迭代中具有 CSS 类的元素each()。
  • $(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()绝对没有选择，因为向上移动 DOM 并返回与给定 selector 匹配的closest()第一个元素 - 包括当前元素。使用不带任何参数只会返回一个空的 jQuery 对象。有关详细信息，请参阅https://api.jquery.com/closest/。closest()

推荐阅读