<div class="sld-wrp">

  <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>
  <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>

</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;
}

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

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