<section>
  <div class="block-1">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">
          <a href="#">
            <img src="https://pp.userapi.com/c850132/v850132551/15ec9b/wM4Lcg8SqwY.jpg">
          </a>
        </div>
        <div class="slide">
          <a href="#">
            <img src="https://pp.userapi.com/c850132/v850132551/15eca2/Pl6GZt4iuSc.jpg">
          </a>
        </div>
        <div class="slide">
          <a href="#">
            <img src="https://pp.userapi.com/c850132/v850132551/15eca9/zipCCA8Gldc.jpg">
          </a>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="block-2">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">
          <img src="https://pp.userapi.com/c850132/v850132551/15ec9b/wM4Lcg8SqwY.jpg">
        </div>
        <div class="slide">
          <img src="https://pp.userapi.com/c850132/v850132551/15eca2/Pl6GZt4iuSc.jpg">
        </div>
        <div class="slide">
          <img src="https://pp.userapi.com/c850132/v850132551/15eca9/zipCCA8Gldc.jpg">
        </div>
        <div class="slide">
          <img src="https://pp.userapi.com/c850132/v850132551/15ec94/_wwgNlaY4kY.jpg">
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="block-3">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">
          <span>1 / 2</span>
        </div>
        <div class="slide">
          <span>2 / 2</span>
        </div>
      </div>
    </div>
  </div>
  <hr>
</section>

* {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
section {
  width: 100%;
  height: 100vh;
  background: #ececec;
}
section > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 100px;
  margin: 10px auto;
  box-shadow: inset 0 0 0 1px #bfbfbf;
}
.slider-box {
  display: flex;
  width: 100px;
  overflow: hidden;
}
.slider-box, .slide {
  box-shadow: inset 0 0 0 1px #bfbfbf;
}
.slider {
  display: flex;
  transition: 0.5s;
}
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  font: bold 200% system-ui;
  color: rgba(0, 0, 0, 0.5);
}
.slide span {
  position: absolute;
}
.block-2 .slider-box {
  width: 300px;
}
.block-3 .slider-box {
  width: 200px;
}
.block-3 .slide {
  width: 100px;
  height: 100px;
}

$('.slide').click(function () {
   var index = $(this).index();
   console.log(index)
});