arrow_back
View code

<div class="carousel-v4">
  <div class="box box-0">
    <img src="/static/images/1a.jpg" alt="">
  </div>
  <div class="box box-1">
    <img src="/static/images/2a.jpg" alt="">
  </div>
  <div class="box box-2">
    <img src="/static/images/3a.jpg" alt="">
  </div>
  <div class="box box-3">
    <img src="/static/images/4a.jpg" alt="">
  </div>
  <div class="box box-4">
    <img src="/static/images/5a.jpg" alt="">
  </div>
  <div class="controls">
    <svg class="prev" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.794 17.658H33v-2H4.492l13.35-13.935L16.46.278l-14.85 15.5-.691.722.692.723.39.407v.028h.027L16.46 32.722l1.384-1.444-13.05-13.62z" fill="var(--color-highest)" />
    </svg>
    <svg class="next" width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.794 17.658H33v-2H4.492l13.35-13.935L16.46.278l-14.85 15.5-.691.722.692.723.39.407v.028h.027L16.46 32.722l1.384-1.444-13.05-13.62z" fill="var(--color-highest)" />
    </svg>
  </div>
</div>
                        
Copy HTML

/*
 * File: _carousel-v4.scss
 * Location /src/scss/components
 * Carousel v4 (3D) component
 */

:root {
    --carousel-v4-item-width: 300px;
    --carousel-v4-item-width-mobile: 200px;
}
.carousel-v4 {
    position: relative;
    width: 80%;
    height: 600px;
    @media screen and (max-width: 768px) {
        width: 100%;
        height: 300px;
    }
    margin: 0 auto;
    
    .prev, .next {
        position: absolute;
        top: 50%;
        @media screen and (max-width: 1024px) {
            top: 100%;
        }
        cursor: pointer;
    }
    .prev {
        left: 90px;
        @media screen and (max-width: 1024px) {
            right: 90px;
            left: auto;
        }
    }
    .next {
        right: 90px;
        @media screen and (max-width: 1024px) {
            right: 30px;
            
        }
        transform: scale(-1);
    }
    .box {
        width: var(--carousel-v4-item-width);
        height: 350px;
        @media screen and (max-width: 768px) {
            width: var(--carousel-v4-item-width-mobile);
            height: 250px;
        }
        border: #aaa;
        position: absolute;
        cursor: pointer;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        left: 50%;
        top: 50%;
        &.lower {
            filter: brightness(90%);
        }
        transition: all 0.3s ease-in-out;
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        transform: translate(-50%, -50%);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &-2 {
            transform: translate(-50%, -50%) scale(1);
            z-index: 5;
            &:hover {
                transform: translate(-50%, -50%) scale(1.02);
            }
        }
        &-1 {
            transform: translate(calc(-50% - var(--carousel-v4-item-width) / 2), -50%) scale(0.8);
            z-index: 4;
            opacity: 0.95;
        }
        &-3 {
            transform: translate(calc(-50% + var(--carousel-v4-item-width) / 2), -50%) scale(0.8);
            z-index: 4;
            opacity: 0.95;
        }
        &-0 {
            transform: translate(calc(-50% - var(--carousel-v4-item-width)), -50%) scale(0.6);
            z-index: 3;
            opacity: 0.5;
            @media screen and (max-width: 768px) {
            opacity: 0; 
            }
        }
        &-4 {
            transform: translate(calc(-50% + var(--carousel-v4-item-width)), -50%) scale(0.6);
            z-index: 3;
            opacity: 0.5;
            @media screen and (max-width: 768px) {
                opacity: 0; 
            }
        }
    }
}
                        
Copy SCSS

/*
 * File: carousel-v4.js
 * Location /src/js/components
 * Carousel v4 (3D) component
*/

document.querySelectorAll(".carousel-v4").forEach((carousel) => {
  const nextBtn = carousel.querySelector(".next");
  const prevBtn = carousel.querySelector(".prev");
  const boxes = carousel.querySelectorAll(".box");

  function next(index, box, delta) {
    if (index < delta) {
      box.classList.remove(`box-${index}`);
      box.classList.add(`box-${boxes.length - Math.abs(index - delta)}`);
    } else {
      box.classList.remove(`box-${index}`);
      box.classList.add(`box-${index - delta}`);
    }
  }

  function prev(index, box, delta) {
    if (index > boxes.length - 1 - delta) {
      box.classList.remove(`box-${index}`);
      box.classList.add(`box-${boxes.length - 1 - index}`);
    } else {
      box.classList.remove(`box-${index}`);
      box.classList.add(`box-${index + delta}`);
    }
  }
  boxes.forEach((box) => {
    box.addEventListener("mouseover", () => {
      boxes.forEach((b) => {
        if (b != box) {
          b.classList.add("lower");
        }
      });
    });
    box.addEventListener("mouseout", () => {
      boxes.forEach((b) => {
        if (b != box) {
          b.classList.remove("lower");
        }
      });
    });
    box.addEventListener("click", () => {
      const currentIndex = parseInt(box.className.split(" ")[1].split("-")[1]);
      if (currentIndex > boxes.length / 2) {
        boxes.forEach(function (box, index) {
          const cIndex = parseInt(box.className.split(" ")[1].split("-")[1]);
          next(cIndex, box, currentIndex - Math.floor(boxes.length / 2));
        });
      } else {
        boxes.forEach(function (box) {
          const cIndex = parseInt(box.className.split(" ")[1].split("-")[1]);
          prev(cIndex, box, Math.floor(boxes.length / 2) - currentIndex);
        });
      }
    });
  });

  nextBtn.addEventListener("click", () => {
    boxes.forEach(function (box, index) {
      const currentIndex = parseInt(box.className.split(" ")[1].split("-")[1]);
      next(currentIndex, box, 1);
    });
  });
  prevBtn.addEventListener("click", () => {
    const boxes = document.querySelectorAll(".box");
    boxes.forEach(function (box) {
      const currentIndex = parseInt(box.className.split(" ")[1].split("-")[1]);
      prev(currentIndex, box, 1);
    });
  });
});

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.