<div class="carousel">
  <ul class="carousel__list">
    <li class="carousel__item" data-pos="-2">1</li>
    <li class="carousel__item" data-pos="-1">2</li>
    <li class="carousel__item" data-pos="0">3</li>
    <li class="carousel__item" data-pos="1">4</li>
    <li class="carousel__item" data-pos="2">5</li>
  </ul>
</div>

html,
body {
  padding: 0;
  margin: 0;
}

html {
  height: 100vh;
}

body {
  height: 100vh;
}

.carousel {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  font-family: Arial;

  &__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    justify-content: center;
    perspective: 300px;
  }
  
  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0px;
    width: 150px;
    height: 250px;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
    position: absolute;
    transition: all .3s ease-in;
    
    &:nth-child(1) {
      background: linear-gradient(45deg, #2D35EB 0%, #904ED4 100%);
    }
    &:nth-child(2) {
      background: linear-gradient(45deg, #2D35EB 0%, #fdbb2d 100%);
    }
    &:nth-child(3) {
      background: linear-gradient(45deg, #2D35EB 0%, #22c1c3 100%);
    }
    &:nth-child(4) {
      background: linear-gradient(45deg, #fdbb2d 0%, #904ED4 100%);
    }
    &:nth-child(5) {
      background: linear-gradient(45deg, #22c1c3 0%, #904ED4 100%);
    }
    
    &[data-pos="0"] {
      z-index: 5;
    }
    
    &[data-pos="-1"],
    &[data-pos="1"] {
      opacity: 0.7;
      filter: blur(1px) grayscale(10%);
    }
    
    &[data-pos="-1"] {
      transform: translateX(-40%) scale(.9);
      z-index: 4;
    }
    
    &[data-pos="1"] {
      transform: translateX(40%) scale(.9);
      z-index: 4;
    }
    
    &[data-pos="-2"],
    &[data-pos="2"] {
      opacity: 0.4;
      filter: blur(3px) grayscale(20%);
    }
    
    &[data-pos="-2"] {
      transform: translateX(-70%) scale(.8);
      z-index: 3;
    }
    
    &[data-pos="2"] {
      transform: translateX(70%) scale(.8);
      z-index: 3;
    }
  }
}

const state = {};
const carouselList = document.querySelector('.carousel__list');
const carouselItems = document.querySelectorAll('.carousel__item');
const elems = Array.from(carouselItems);

carouselList.addEventListener('click', function (event) {
  var newActive = event.target;
  var isItem = newActive.closest('.carousel__item');

  if (!isItem || newActive.classList.contains('carousel__item_active')) {
    return;
  };
  
  update(newActive);
});

const update = function(newActive) {
  const newActivePos = newActive.dataset.pos;

  const current = elems.find((elem) => elem.dataset.pos == 0);
  const prev = elems.find((elem) => elem.dataset.pos == -1);
  const next = elems.find((elem) => elem.dataset.pos == 1);
  const first = elems.find((elem) => elem.dataset.pos == -2);
  const last = elems.find((elem) => elem.dataset.pos == 2);
  
  current.classList.remove('carousel__item_active');
  
  [current, prev, next, first, last].forEach(item => {
    var itemPos = item.dataset.pos;

    item.dataset.pos = getPos(itemPos, newActivePos)
  });
};

const getPos = function (current, active) {
  const diff = current - active;

  if (Math.abs(current - active) > 2) {
    return -current
  }

  return diff;
}