Slider with problems. It does not work two lines

Question

I’m using the "Slider Syncing" by SLICK SLIDER (here https://kenwheeler.github.io/slick/) to make a slide that when you click, appears more information of it. For example, if I click on the first little square, more information about it will appear on the big one. But I’m not able to do this because when I add the ROW function (which is the one that should make the slide have two lines), it stops working because when I click on the first comic, it ends up selecting the whole first line (vertically). Would anyone have a solution to the problem? And could you help me?

Here are the codes I know

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
 
<div class="container">
 <div class="slider-for">
        <div class="slide-container">go 1</div>
        <div class="slide-container">go 2</div>
        <div class="slide-container">go 3</div>
        <div class="slide-container">go 4</div>
        <div class="slide-container">go 5</div>
        <div class="slide-container">go 6</div>
           <div class="slide-container">go 7</div>

           <div class="slide-container">go 8</div>

      </div>
      <div class="slider-nav">
        <div class="slide-btn">go 1</div>
        <div class="slide-btn">go 2</div>
        <div class="slide-btn">go 3</div>
        <div class="slide-btn">go 4</div>
        <div class="slide-btn">go 5</div>
        <div class="slide-btn">go 6</div>
        <div class="slide-btn">go 7</div>
        <div class="slide-btn">go 8</div>

      </div>      </div>






    .container {
  width: 700px;
  margin: auto;
}

.slide-btn {
    padding: 10px;
    background: #000;
    color: #fff;
    margin: 10px;
}

.slide-container {
    background: #000;
    padding: 10px;
    color: #fff;
}

 
button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
    position: absolute;
    bottom: -44px;
    border: none;
    width: 68px;
    height: 47px;
}

button.slick-next.slick-arrow {
    right: 1px;
}

button.slick-prev.slick-arrow {
    left: 1px;
}




$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  autoplay: false,
  rows: 2,
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  centerMode: true,
  focusOnSelect: true
});