CodePen Embed - slick slider dots arrows counter

<div class="news">
  <div class="news__content">
    <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://images.unsplash.com/photo-1669504779502-7589d5688634?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3MTk3OTc&ixlib=rb-4.0.3&q=80&w=400) 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://images.unsplash.com/photo-1670509543492-7d6aef5b4d6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3MTk3OTc&ixlib=rb-4.0.3&q=80&w=400) 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://images.unsplash.com/photo-1669749614397-2b9f87ab2168?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3MTk3OTc&ixlib=rb-4.0.3&q=80&w=400) 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://images.unsplash.com/photo-1669410550410-b3799b687b09?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA3MTk4OTE&ixlib=rb-4.0.3&q=80&w=400) 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>
  
  
  <div class="news__pagination">
    <div class="news__arrows"></div>
    <div class="slider-dots-box"></div>
    <div class="news__counter"></div>
  </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__content {
  overflow: hidden;
}

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

.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__arrow_dir_up {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/arrows__left.png)
    no-repeat;
  transform: rotate(90deg);
}

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

.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-size: 15px;
}


.slider-dots-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.slider-dots button {
  width: 30px;
  height: 20px;
  display: block;
  border: 0;
  background-color: transparent;
  margin: 0 6px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  transition: .3s all;
  position: relative;
  z-index: 0;
  font-size: 0;
}

.slider-dots-box button:before {
  content: "";
  display: block;
  z-index: 2;
  width: 30px;
  height: 2px;
  display: block;
  border: 0;
  background-color: grey;
  transition: .3s all;
}


.slider-dots-box .slick-active button:before {
    height: 10px;
}

$(function() {
  
  $(".news__slider").on("init reInit afterChange", function(event, slick) {
    $(".news__counter").html(
      slick.slickCurrentSlide() + 1 + "/" + slick.slideCount
    );
  });
  
  $(".news__slider").slick({
    infinite: true,
    speed: 600,
    slidesToShow: 1,
    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: $('.slider-dots-box'),
    dotsClass: 'slider-dots',
    responsive: [
      {
        breakpoint: 640,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: 400,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  });
  
});

This Pen is owned by get-web on CodePen.

See more by @get-web on CodePen

External CSS

External JavaScript