刷新后无法点击光滑的幻灯片

Question

我光滑的滑块的幻灯片链接到详细信息页面。因此，单击将隐藏滑块，而在详细视图中将其淡化。使用按钮，我可以回到起点并再次滑动光滑的滑块。

有时候，平滑的滑块在淡出/淡入后不会加载幻灯片，因此我尝试使用.slick('refresh');。但是刷新后，滑块将不再可单击。

这是我的代码：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">

<section class="start">
  <div class="catSlider">
    <div class="catLink">1</div>
    <div class="catLink">2</div>
    <div class="catLink">3</div>
  </div>
</section>
<section class="detail hide">
  <div class="backStart">back to start</div>
</section>

CSS：

.slick-slider { 
  width: 300px;
}
.slick-slide {
  background: red;
  padding: 40px 10px;
  margin: 0 10px;
}

.hide {
  display: none;
}

JS：

$(document).on('ready', function() {
  $(".catSlider").slick({
    dots: true,
    centerMode: true,
    arrows: false,
    fade: false,
    infinite: true,
    autoplay: false,
    autoplaySpeed: 5000
  });
});

$( ".catLink" ).click(function() {
  $( ".start" ).addClass( "hide" );
  $( ".detail" ).removeClass( "hide" );
});

$( ".backStart" ).click(function() {
  $( ".detail" ).addClass( "hide" );
  $( ".start" ).removeClass( "hide" );
  $( ".catSlider" ).slick('refresh');
});

Codepen：https://codepen.io/anon/pen/VJGjXR

总结问题： 单击幻灯片并返回开始后，该幻灯片将不再可单击。