在 Slick Slider 的 asNavFor 滑块中隐藏活动幻灯片

Question

问题

有没有办法从 Slick Slider 中的滑块隐藏当前活动的幻灯片？

动机

我正在构建一个特色帖子滑块。一个 post 将突出显示，而其余 post 将在侧面的一列中作为预览显示。一次总共显示 5 post 秒。

使用 Slick Slider (1.9.0) 很容易做到这一点，但它有一个问题："remaining posts" 部分应该仅显示剩余部分posts 而不是当前的 post。 So when a post is selected it should scroll out of view in the slider, and the featured post slider will change to use the slide at the same index.

操作说明

基本上，初始状态应该是：

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

如果我从“剩余滑块”中单击幻灯片 2：

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

JS Fiddle

这是我正在处理的 JS Fiddle：https://jsfiddle.net/zak_rhm/Lks61ah7/71/

HTML

<div id="Large_Slider">
    <!-- Should only show one slide at a time. -->
    <article class="slide">
        <h2>Slide 1</h2>
    </article>
    <article class="slide">
        <h2>Slide 2</h2>
    </article>
    <article class="slide">
        <h2>Slide 3</h2>
    </article>
    <article class="slide">
        <h2>Slide 4</h2>
    </article>
    <article class="slide">
        <h2>Slide 5</h2>
    </article>
</div>
<ul id="Small_Slider">
    <!-- Should only show four slides at a time, never show the slide in #Large_Slider -->
    <li id="slide">Slide 1</li>
    <li id="slide">Slide 2</li>
    <li id="slide">Slide 3</li>
    <li id="slide">Slide 4</li>
    <li id="slide">Slide 5</li>
</ul>

JavaScript (jQuery)

var $slider_lg = $("#Large_Slider")
var $slider_sm = $("#Small_Slider")

$slider_lg.slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '#Small_Slider',
  dots: true,
  fade: true
});

$slider_sm.slick({
  arrows: false,
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '#Large_Slider',
  focusOnSelect: true,
  vertical: true,
  verticalSwiping: true
});

Answer 1

这应该可以满足您的需求：https://jsfiddle.net/kmsv5xn8/

我更改了您的 HTML，以便 "Small_Slider" 部分从 #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>

这会处理初始偏移量，但是为了显示正确的幻灯片，我禁用了 focusOnSelect: true 属性并添加了一个事件侦听器：

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

相应的幻灯片索引取自data-*属性并更新主轮播；因为它使用 asNavFor 属性，Slick 会处理剩下的事情。

Answer 2

只需在 .slick-current 添加样式即可 class

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

在 Slick Slider 的 asNavFor 滑块中隐藏活动幻灯片

Hide Active Slide in `asNavFor` slider in Slick Slider

javascript

jquery

slider

slick.js

问题

动机

操作说明

JS Fiddle

HTML

JavaScript (jQuery)