card-carousel-colors-3D

PHOTO EMBED

Wed May 25 2022 12:33:13 GMT+0000 (Coordinated Universal Time)

Saved by @Moyez #slider #carousel #cards 

<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>

<style>
  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;
  }

  .carousel__list {
    display: flex;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    justify-content: center;
    perspective: 300px;
  }
  .carousel__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 0.3s ease-in;
  }
  .carousel__item:nth-child(1) {
    background: linear-gradient(45deg, #2d35eb 0%, #904ed4 100%);
  }
  .carousel__item:nth-child(2) {
    background: linear-gradient(45deg, #2d35eb 0%, #fdbb2d 100%);
  }
  .carousel__item:nth-child(3) {
    background: linear-gradient(45deg, #2d35eb 0%, #22c1c3 100%);
  }
  .carousel__item:nth-child(4) {
    background: linear-gradient(45deg, #fdbb2d 0%, #904ed4 100%);
  }
  .carousel__item: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(0.9);
    z-index: 4;
  }
  [data-pos="1"] {
    transform: translateX(40%) scale(0.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(0.8);
    z-index: 3;
  }
  [data-pos="2"] {
    transform: translateX(70%) scale(0.8);
    z-index: 3;
  }
</style>

<script>

  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;
</script>
content_copyCOPY

Worked javascript vanilla, with some changes

https://codepen.io/frise/pen/mZvKpe