<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination">
  </div>
  
  <div class="swiper-progressbar-icon"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

.swiper-wrapper {
  padding: 0 50px;
}

.swiper-pagination {
	height: 6px;
	width: 100%;
	position: relative;
	border-radius: 10em;
	margin-top: 120px;
	background-color: rgba(70, 150, 232, 0.2);
}

.swiper-progressbar-icon {
	width: 70px;
	height: 50px;
	display: block;
	background-image: url(https://e7.pngegg.com/pngimages/872/879/png-clipart-orange-car-illustration-compact-car-motors-corporation-orange-car-car-accident-van-thumbnail.png);
	background-size: contain;
	background-repeat: no-repeat;
  background-position: top center;
	position: absolute;
	left: 0;
	bottom: 0;
  transition: left 300ms;
}

const lerp = (a, b, t) => a * (1 - t) + b * t;

const swiper = new Swiper(".swiper", {
  slidesPerView: 3,
  spaceBetween: 30,
  autoHeight: true,
  grabCursor: true,
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  pagination: {
    el: ".swiper-pagination",
    type: "progressbar",
  },
  on: {
    afterInit(swiper) {
      swiper.progressIconEl = swiper.el.querySelector(
        ".swiper-progressbar-icon"
      );
    },
    progress(swiper, progress) {
      if (swiper.progressIconEl) {
        const fractions =
          swiper.slides.length - swiper.params.slidesPerView + 1;
        const t = lerp(1 / fractions, 1, progress);
        swiper.progressIconEl.style.left = `calc(${t * 100}% - 70px)`;
      }
    }
  },
  watchSlidesProgress: true
});