const option = {
  lazyLoad: 'ondemand',
  dots: false,
  arrows: false,
  slidesToShow: 3,
  infinite: false
}

const slickGoTo = $('.js-slickGoTo');
let navList = $('.js-navList');

slickGoTo.slick(option);

navList.on('click', function() {
  index = $(this).index();
  slickGoTo.slick("slickGoTo", index, false);
});

.p-goto {
  padding: 30px 0;
}

.p-goto__ttl {
    color: teal;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
  }

.p-goto-slider .slick-list {
  padding: 0 9.4%;
}

.p-goto-slider__item {
  background: #e3e3e3;
  height: 80px;
  margin-right: 15px;
  -webkit-tap-highlight-color: rgba(#000, 0);
  width: 400px;
}

.p-goto-slider__item:focus {
  outline: none;
}

.p-goto-slider__no {
    align-items: center;
    color: #999;
    display: flex;
    font-size: 24px;
    font-weight: bold;
    height: 100%;
    justify-content: center;
    width: 100%;
  }

.p-goto-nav {
  padding: 40px 0;
  
}

.p-goto-nav__lists {
    display: flex;
    justify-content: center;
  }

.p-goto-nav__list {
    color: #3b4675;
    font-size: 14px;
    font-weight: bold;
    padding: 0 5px;
    text-decoration: underline;
  }
  
 .p-goto-nav__list:hover {
    cursor: pointer;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" />
<section class="p-goto">
  <h2 class="p-goto__ttl">Slick Go To</h2>
  <div class="p-goto-nav">
    <div class="p-goto-nav__items">
      <div class="p-goto-nav__item">
        <ul class="p-goto-nav__lists">
          <li class="p-goto-nav__list js-navList">Go To 1</li>
          <li class="p-goto-nav__list js-navList">Go To 2</li>
          <li class="p-goto-nav__list js-navList">Go To 3</li>
          <li class="p-goto-nav__list js-navList">Go To 4</li>
          <li class="p-goto-nav__list js-navList">Go To 5</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /.p-goto-nav -->
  <div class="p-goto-slider">
    <ul class="p-goto-slider__items js-slickGoTo">
      <li class="p-goto-slider__item"><span class="p-goto-slider__no">1</span></li>
      <li class="p-goto-slider__item"><span class="p-goto-slider__no">2</span></li>
      <li class="p-goto-slider__item"><span class="p-goto-slider__no">3</span></li>
      <li class="p-goto-slider__item"><span class="p-goto-slider__no">4</span></li>
      <li class="p-goto-slider__item"><span class="p-goto-slider__no">5</span></li>
    </ul>
    <!-- /.p-goto-slider__items -->
  </div>
  <!-- /.p-goto-slider -->
</section>
<!-- /.p-goto -->