<h1 class="title">Image Slider Using Flickity</h1>
    <div class="carousel">
      <div class="carousel-cell">
        <img
          src="https://images.unsplash.com/photo-1512829227338-32c95886c4ac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
          alt="Victoria Sereda"
        />
      </div>
      <div class="carousel-cell">
        <img
          src="https://images.unsplash.com/photo-1467281352684-9d059d88adc5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=777&q=80"
          alt="WillSpirit L.N."
        />
      </div>
      <div class="carousel-cell">
        <img
          src="https://images.unsplash.com/photo-1615212879967-c1c189978139?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80"
          alt="Angelina"
        />
      </div>
      <div class="carousel-cell">
        <img
          src="https://images.unsplash.com/photo-1579979681171-27136dd644ed?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=753&q=80"
          alt="Milo Bauman"
        />
      </div>
      <div class="carousel-cell">
        <img
          src="https://images.unsplash.com/photo-1615212842895-426a0840dc8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
          alt="Angelina"
        />
      </div>
    </div>

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;300;400;500;600;700&display=swap');



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
  overflow: hidden;
  height: 100vh;
  color: #fff;
  background: #161616;
}

.title{
  padding: 20px;
text-align: center;  
}

.carousel {
  height: 450px;
}


.carousel-cell {
  margin-right: 40px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-cell img {
  display: block;
  max-width: 100%;
  opacity: 0.25;
  transform: scale(0.30);
  filter: blur(5px);
  transition: opacity 0.25s, transform 0.25s, filter 0.25s;
}

.carousel-cell.is-selected img {

  opacity: 1;
  transform: scale(1);
  filter: none;
}


@media screen and (max-width: 767px) {
  .carousel-cell img {
    height: 350px;
  }
}

@media screen and (min-width: 768px) {
  .carousel-cell img {
    height: 400px;
  }
}

@media screen and (min-width: 960px) {
  .carousel-cell {
    width: 60%;
  }
}

var $carousel = $('.carousel').flickity({
    imagesLoaded: true,
    prevNextButtons: false,
    freeScroll: true,
    wrapAround: true,
    autoPlay: 2500,
    pauseAutoPlayOnHover: false

  });
  
  var $imgs = $carousel.find('.carousel-cell img');
  var docStyle = document.documentElement.style;
  var transformProp = typeof docStyle.transform == 'string' ?
    'transform' : 'WebkitTransform';
  var flkty = $carousel.data('flickity');
  
  $carousel.on( 'scroll.flickity', function() {
    flkty.slides.forEach( function( slide, i ) {
      var img = $imgs[i];
      var x = ( slide.target + flkty.x ) * -1/4;
      img.style[ transformProp ] = 'translateX(' + x  + 'px)';
    });
  });