<div class="news">
  <div class="ttl content__ttl news__ttl">
    <div class="ttl__name">
      <span class="ttl__specify">Н</span>овости
    </div>
    <div class="news__arrows">
    </div>
  </div>
  <div class="news__slider">
    <div class="news__slide">
      <div class="news__container article">
        <div class="article__img-container">
          <div class="article__img" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/news__img_1.jpg) no-repeat center center; background-size: cover;">
          </div>
        </div>
        <div class="article__title">Заголовок новости</div>
        <div class="article__content">Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты.</div>
        <div class="article__info">
          <a href="#" class="btn btn_type_8"><span class="btn__content">Читать
                                                подробнее</span></a>
          <div class="article__date">
            01/01/2019
          </div>
        </div>
      </div>
      <!-- END  article  -->
    </div>
    <!-- END  news__slide  -->
    <div class="news__slide">
      <div class="news__container article">
        <div class="article__img-container">
          <div class="article__img" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/news__img_2.jpg) no-repeat center center; background-size: cover;">
          </div>
        </div>
        <div class="article__title">Заголовок новости</div>
        <div class="article__content">Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты.</div>
        <div class="article__info">
          <a href="#" class="btn btn_type_8"><span class="btn__content">Читать
                                                подробнее</span></a>
          <div class="article__date">
            01/01/2019
          </div>
        </div>
      </div>
      <!-- END  article  -->
    </div>
    <div class="news__slide">
      <div class="news__container article">
        <div class="article__img-container">
          <div class="article__img" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/news__img_1.jpg) no-repeat center center; background-size: cover;">
          </div>
        </div>
        <div class="article__title">Заголовок новости</div>
        <div class="article__content">Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. </div>
        <div class="article__info">
          <a href="#" class="btn btn_type_8"><span class="btn__content">Читать
                                                подробнее</span></a>
          <div class="article__date">
            01/01/2019
          </div>
        </div>
      </div>
      <!-- END  article  -->
    </div>
    <!-- END  news__slide  -->
    <div class="news__slide">
      <div class="news__container article">
        <div class="article__img-container">
          <div class="article__img" style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/news__img_3.jpg) no-repeat center center; background-size: cover;">
          </div>
        </div>
        <div class="article__title">Заголовок новости</div>
        <div class="article__content">Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты.</div>
        <div class="article__info">
          <a href="#" class="btn btn_type_8"><span class="btn__content">Читать
                                                подробнее</span></a>
          <div class="article__date">
            01/01/2019
          </div>
        </div>
      </div>
      <!-- END  article  -->
    </div>
    <!-- END  news__slide  -->
  </div>
  <!-- END  news__slider  -->
  <div class="news__dots">
  </div>
</div>
<!-- END  news  -->

/* ttl */

.ttl {
  font-size: 24px;
  color: #525458;
  text-transform: uppercase;
  margin: 10px 0;
}

/* news */

.news {
  max-width: 640px;
  margin: 20px auto;
  overflow: hidden;
  outline: 2px solid red;
}

.news__ttl {
  display: flex;
  justify-content: space-between;
}

.news__arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 40px;
}

.news__arrow {
  width: 14px;
  height: 17px;
  cursor: pointer;
  filter: saturate(0%);
}

.news__arrow:hover {
  filter: saturate(100%);
}

.news__arrow_dir_left {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__left.png)
    no-repeat;
}

.news__arrow_dir_right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__right.png)
    no-repeat;
}

.news__dots {
  position: relative;
}

.news__dots-list {
  display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}

.news__dots-list .slick-active button {
  background-color: yellow;
}

.news__slider {
  margin: 0 -10px;
  height: 367px;
  overflow-x: hidden;
}

.news__slide {
  box-sizing: border-box;
}

/* article */

.article {
  display: flex;
  flex-direction: column;
  width: calc(100% - 20px);
  margin: 0 auto;
}

.article__img-container {
  height: 165px;
  position: relative;
  overflow: hidden;
}

.article__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../images/news__img_2.jpg) no-repeat center center;
  background-size: cover;
  transition: 0.3s all;
}

.article:hover .article__img {
  transform: scale(1.2);
}

.article__title {
  color: #8c570a;
  font-weight: 700;
  font-size: 22px;
  padding: 20px 0;
}

.article__content {
  color: #85878d;
  font-size: 16px;
  line-height: 20px;
  height: 95px;
  overflow: hidden;
}

.article__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}

.article__date {
  color: #737373;
  font-family: "Candara";
  font-size: 15px;
}

$(function () {
    $('.news__slider').slick({
        infinite: true,
        speed: 600,
        slidesToShow: 3,
        autoplay: true,
      autoplaySpeed:5000,
        fade: false,
      arrows: true,
        appendArrows: $('.news__arrows'),
        prevArrow: '<div class="news__arrow news__arrow_dir_left"></div>',
        nextArrow: '<div class="news__arrow news__arrow_dir_right"></div>',
     dots: true,
     appendDots: $('.news__dots'),
     dotsClass: 'news__dots-list',
        responsive: [{
            breakpoint: 640,
            settings: {
                slidesToShow: 2,
            }
        },
      {
            breakpoint: 400,
            settings: {
                slidesToShow: 1,
            }
        }]
    });
});