Estoy usando el control deslizante de navegación, pero quiero ocultar la diapositiva actual en el control deslizante de navegación.

Actualmente, puede ver la imagen de la diapositiva actual en la parte superior, pero también puede ver esa misma imagen al comienzo del control deslizante de navegación. Sin embargo, quiero ocultar esta imagen para que el control deslizante solo muestre las siguientes imágenes, no la actual.

¿Alguna idea de si esto es posible?

Codepen para referencia.

 <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, });