如果我调整窗口大小，光滑的轮播滑块导航项目会隐藏在屏幕之外

Question

现在

slick

slider-nav

如果我

resize

window

，项目就会隐藏在屏幕之外。

这是

slick

发生的事情，首先

onload/refresh

页面当然工作正常，但是当我

click

任何数字

item

（如数字

5

和

resize

）时，

window

在

active slide

之前所有幻灯片都得到

hidden 

关闭

screen

。

如果可以使用

js

修复那就太好了。

为了更好地理解，请检查下面的图像和代码。这里还有笔代码 https://codepen.io/.
图片：

代码片段：

function slickBarWithCounter() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        infinite: false,
        draggable: false,
        swipe: false,
        fade: false,
        swipeToSlide: false,
        touchMove: false,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        arrows: false,
        infinite: false,
        focusOnSelect: true,
        variableWidth: true
    });

    function barAndCounter(index = 0) {
        //bar
        var progressBar = $('.progress-bar__inner');
        var itemWidth = 100 / $('.slider-nav .icons').length;
        var progress = (index + 1) * itemWidth;
        progressBar.css('width', progress + '%');
        //counter
        var sliderNav = $('.slider-nav');
        var totalSlides = sliderNav.slick('getSlick').slideCount;
        $(".left__count").text('0' + ++index);
        $(".right__count").text('0' + totalSlides);
    }
    // Will be triggered on page load
    barAndCounter();
    // Will be triggered on slider click
    $('.slider-nav .icons').on('click', function() {
        var index = $(this).index();
        barAndCounter(index);
    });
}

slickBarWithCounter();

body{
  background:#ccc;
}
.container {
  font-family:Arial;
  max-width:800px;
  display:block;
  margin:0 auto;
  position: relative;
}
.slider-content {
  background: #fff;
  padding: 3rem;
  font-size: 3rem;
  text-align: center;
  height: 200px !important;
}
.slider-nav .slick-list .slick-current {
  background: green;
  color: white;
}
.slider-nav-wrapper {
  position: absolute;
  left:3rem;
  right: 3rem;
  bottom: 3rem;
}
.slider-nav-wrapper .icons {
  background: black;
  color: #3498db;
  font-size: 1rem;
  margin: 0 .5rem;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.progress-bar {
  width: 100%;
  height: 2px;
  background: gray;
  position: relative;
}
.progress-bar__inner {
  background: green;
  position: absolute;
  height: 6px;
  top: -2px;
  left: 0;
  width: 0;
  transition: width 0.3s ease;
}
.left__count {
  padding-right: 1rem;
}
.right__count {
  padding-left: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<div class="container">
  <div class="slider slider-for">
    <div class="slider-content">1</div>
    <div class="slider-content">2</div>
    <div class="slider-content">3</div>
    <div class="slider-content">4</div>
    <div class="slider-content">5</div>
  </div>
  <div class="slider-nav-wrapper">
   <div class="slider slider-nav">
      <div class="icons">1</div>
      <div class="icons">2</div>
      <div class="icons">3</div>
      <div class="icons">4</div>
      <div class="icons">5</div>
    </div>
    <div style="display: flex; align-items: center; margin-top: 1rem;">
      <div class="left__count">01</div>
      <div class="progress-bar">
        <div class="progress-bar__inner"></div>
      </div> 
      <div class="right__count">05</div>
    </div>
  </div>
</div>