<div class="slider">
  <div class="slider__arrow slider__arrow--prev"></div>
  <div class="slider__arrow slider__arrow--next"></div>
  <div class="items">
    <div class="item-wrapper">
      <img src="http://telegramfor.me/ext_img/porarctic/1183" alt="" class="item">
    </div>
    <div class="item-wrapper">
      <img src="https://404store.com/2017/03/03/mmexport1488537566718.jpg" alt="" class="item">
    </div>
    <div class="item-wrapper">
      <img src="http://www.patrickzephyrphoto.com/images/large/forest-sunshine.jpg" alt="" class="item">
    </div>
  </div>
</div>

body {
  background: #000;
}

.slider {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.item-wrapper {
  img {
    transition: opacity 0.7s;
  }
}

.slider {
  &__arrow {
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    border-radius: 50%;
    z-index: 4;
    width: 85px;
    height: 85px;
    background: url(../img/white-left-arrow.png) no-repeat center / auto,
      rgba(51, 190, 172, 0.5);

    &--next {
      left: auto;
      right: 15px;
      border-radius: 50%;
      z-index: 4;
      background: url(../img/white-right-arrow.png) no-repeat center / auto,
        rgba(51, 190, 172, 0.5);
    }
    
    &:hover {
      cursor: pointer;
    }
  }
  

  
  .slick-slide {
            img {
                opacity : 0.1;
            }
        }

        .slick-current {
            img {
                opacity: 1;
            }
        }

  .item-wrapper {
    img {
      margin: 0 auto;
      max-width: 295px;
    }
  }
}

var slider = $(".items").slick({
  centerMode: true,
  centerPadding: "160px",
  slidesToShow: 1,
  arrows: false,
  infinite: true,
});

$(".slider__arrow--prev").on("click", function() {
  slider.slick("slickPrev");
});
$(".slider__arrow--next").on("click", function() {
  slider.slick("slickNext");
});