Javascript 在滑动滑块中的“asNavFor”滑块中隐藏活动滑块 问题:

有没有办法在Slick slider中隐藏当前活动的幻灯片

动机 我正在构建一个特色帖子滑块。一篇文章将突出显示，而其余的文章将在侧面的专栏中作为预览。一次将显示总共5个员额

（1.9.0）很容易做到这一点，但它有一个问题：“剩余的帖子”部分应该只显示剩余的帖子，而不是当前的帖子。因此，当一篇文章被选中时，它应该在滑块中滚动出视图，并且特色文章滑块将更改为在同一索引处使用幻灯片

行动说明 基本上，初始状态应为：

特色滑块：幻灯片1可见，所有其他滑块均隐藏。 剩余滑块：幻灯片1隐藏，幻灯片2-5可见

如果单击剩余滑块中的幻灯片2：

特色滑块：幻灯片2可见，所有其他滑块均隐藏。 剩余滑块：幻灯片2从视图中滑出，幻灯片3成为新的顶柱，后跟（按顺序）4、5、1

JS小提琴 下面是我正在处理的JS小提琴：

HTML

---

这应该满足您的需求：

我更改了您的HTML，“小滑动条”部分从#2开始，每张幻灯片都有一个

data-sm-slide

属性：

<ul id="Small_Slider" class="slick-slider">
  <li id="sm-slide-2" class="slide slide--sm" data-sm-slide="2">
    <img src="https://via.placeholder.com/640x480.png/0f9/333?text=Slide+2" alt="Slide 2" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 2</span>
  </li>
  <li id="sm-slide-3" class="slide slide--sm" data-sm-slide="3">
    <img src="https://via.placeholder.com/640x480.png/f09/fff?text=Slide+3" alt="Slide 3" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 3</span>
  </li>
  <li id="sm-slide-4" class="slide slide--sm" data-sm-slide="4">
    <img src="https://via.placeholder.com/640x480.png/f90/333?text=Slide+4" alt="Slide 4" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 4</span>
  </li>
  <li id="sm-slide-5" class="slide slide--sm" data-sm-slide="5">
    <img src="https://via.placeholder.com/640x480.png/90f/fff?text=Slide+5" alt="Slide 5" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 5</span>
  </li>
  <li id="sm-slide-1" class="slide slide--sm" data-sm-slide="1">
    <img src="https://via.placeholder.com/640x480.png/09f/333?text=Slide+1" alt="Slide 1" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 1</span>
  </li>
</ul>

---

相应的幻灯片索引取自

数据-*

属性，并更新主转盘；因为它使用了

asNavFor

属性，所以Slick会处理其余部分。

只需在.Slick current类中添加一个样式即可

#Small_Slider .slick-current {
  opacity: 1;
  visibility: hidden;
  width:0px !important;
  height: 0px !important;
}

---

太棒了！效果很好。谢谢你。

<ul id="Small_Slider" class="slick-slider">
  <li id="sm-slide-2" class="slide slide--sm" data-sm-slide="2">
    <img src="https://via.placeholder.com/640x480.png/0f9/333?text=Slide+2" alt="Slide 2" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 2</span>
  </li>
  <li id="sm-slide-3" class="slide slide--sm" data-sm-slide="3">
    <img src="https://via.placeholder.com/640x480.png/f09/fff?text=Slide+3" alt="Slide 3" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 3</span>
  </li>
  <li id="sm-slide-4" class="slide slide--sm" data-sm-slide="4">
    <img src="https://via.placeholder.com/640x480.png/f90/333?text=Slide+4" alt="Slide 4" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 4</span>
  </li>
  <li id="sm-slide-5" class="slide slide--sm" data-sm-slide="5">
    <img src="https://via.placeholder.com/640x480.png/90f/fff?text=Slide+5" alt="Slide 5" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 5</span>
  </li>
  <li id="sm-slide-1" class="slide slide--sm" data-sm-slide="1">
    <img src="https://via.placeholder.com/640x480.png/09f/333?text=Slide+1" alt="Slide 1" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 1</span>
  </li>
</ul>

$slider_sm.on("click", "li.slide", function() {
  var slideNo = $(this).attr("data-sm-slide") - 1;
  $slider_lg.slick("slickGoTo", slideNo);
})

#Small_Slider .slick-current {
  opacity: 1;
  visibility: hidden;
  width:0px !important;
  height: 0px !important;
}