javascript – Please help with the layout of the slider navigation bar


I'm using slick slider. When choosing a slide or just scrolling in the thumbnail section, for some reason it throws the block with slides very far, I can't understand why, the width seems to be how it is regulated by the number of slides. Js


  slidesToShow: 1,
  autoplay: false,
  slidesToScroll: 1,
  asNavFor: '.cool-slider-nav',
  nextArrow: '<a class="right carousel-control custom-ico-slide"><i class="demo-icon icon-right-open-big" aria-hidden="true"></i></a>',
  prevArrow: '<a class="left carousel-control custom-ico-slide"><i class="demo-icon icon-left-open-big" aria-hidden="true"></i></a>',
  fade: true

  slidesToScroll: 1,
  autoplay: false,
  asNavFor: '.cool-slider',
  focusOnSelect: true,
  infinite : false,
  arrows: false,
  dots: true,
  appendDots: $(".caption-wrapper")

I leave the problem with the slider at the link. I will not dump the html and css code. Please indicate what is my mistake


With the cool-slider-nav you currently have, you don't need a slider. You have all 6 slides fit on one screen. And therefore, these slides serve as custom dots , but definitely not a slider. Double their width and you should see normal results.

Scroll to Top