Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
How to hide current slide in the slick slider nav?

I'm using the slick slider nav, but I want to hide the current slide in the nav slider.

Currently you can see the current slide image at the top, but you can also see that same image at the start of the nav slider. I want to hide this image though, so that the slider nav will only show the next images, not the current.

Any idea if this is possible?

Codepen for reference.

<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,
  });
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Slick adds the slick-current class to the current slide.

So just add this to your CSS style:

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

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda