如何将电流滑块隐藏在光滑滑块导航中？

Question

我正在使用光滑滑块导航，但我想把当前的幻灯片隐藏在导航滑块中。

当前，您可以在顶部看到当前的幻灯片图像，但也可以在导航滑块开始时看到相同的图像。我想隐藏这个图像，这样滑块导航将只显示下一个图像，而不是当前图像。

知道这有可能吗？

科德芬供参考。

<div class="container">
    <div class="row">
        <div class="col">
            <div class="main-slider">
                <img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
            </div>
             <div class="nav-slider">
                <img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
                <img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
            </div>
        </div>
    </div>
</div>

  // Gallery - Synced sliders
  $(".main-slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: ".nav-slider",
  });
  // Gallery - Nav slider
  $(".nav-slider").slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: ".main-slider",
    dots: false,
    arrows: true,
    focusOnSelect: true,
  });

Answer 1

斯利克将slick-current类添加到当前幻灯片中。

因此，只需将其添加到您的CSS样式：

.nav-slider .slick-current {
  display: none;
}

​