<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-for-2">
    <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,
.slider-for-2{
  max-width: 200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.slide-container {
  height: 20vh;
  background-color: #fff;
  text-align: center;
  line-height: 20vh;
  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-for-2'
});
$('.slider-nav').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.slider-for, .slider-for-2',
  dots: true,
  arrows: true,
});

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