body {
  background-color: #ccc;
  margin: 0;
  padding: 0;
}


.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
});