<div class="sld-wrp">

  <div class="slider-for">
    <div class="slide-container">0</div>
    <div class="slide-container">1</div>
    <div class="slide-container">2</div>
    <div class="slide-container">3</div>
  </div>
  <div class="slider-nav">
    <div class="slide-btn" data-go="0">go 0</div>
    <div class="slide-btn" data-go="1">go 1</div>
    <div class="slide-btn" data-go="2">go 2</div>
    <div class="slide-btn" data-go="3">go 3</div>
  </div>

</div>

body {
  background-color: #ccc;
  margin: 0;
  padding: 30px;
  box-sizing: border-box;
}

.sld-wrp {
  max-width: 800px;
  margin: 0 auto;
}

.slider-for {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.slide-container {
  height: 40vh;
  background-color: #fff;
  text-align: center;
  line-height: 40vh;
  font-size: 40px;
  font-weight: bold;
  border: 1px solid #000;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.slide-btn {
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  background-color: yellow;
  border: 1px solid #000;
  cursor: pointer;
  flex-basis: 25%;
}

.slide-btn:hover {
  background-color: rgb(255, 179, 0);
}

.slider-nav {
  display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
});

$('[data-go]').on('click', function() {
  const __this = $(this);
  let index = __this.attr('data-go');
    $('.slider-for').slick('slickGoTo', parseInt(index));
});