Gradient Cards Carousel using HTML CSS and JavaScript

Step into the world of boundless creativity with Coding Torque! Today, we embark on an extraordinary journey to craft a mesmerizing Gradient Cards Carousel using the power of HTML, CSS, and JavaScript. Picture a captivating carousel of stunning gradient-infused cards gracefully gliding across the screen, enchanting your users with a seamless display of eye-catching content. In this thrilling tutorial, we’ll unravel the artistry behind designing and animating these dynamic cards, allowing you to showcase your ideas, products, or portfolio in a visually stunning and interactive format. Whether you’re a coding enthusiast seeking to expand your repertoire or a design aficionado eager to elevate your web projects, this guide is your gateway to unlocking the true potential of web development. So, buckle up and prepare to be inspired as we delve into the world of Gradient Cards Carousel – where innovation meets elegance, and your imagination takes center stage!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Gradient Cards Carousel using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

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

CSS Code

Create a file style.css and paste the code below.

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%);
}
.carousel__item[data-pos="0"] {
    z-index: 5;
}
.carousel__item[data-pos="-1"], .carousel__item[data-pos="1"] {
    opacity: 0.7;
    filter: blur(1px) grayscale(10%);
}
.carousel__item[data-pos="-1"] {
    transform: translateX(-40%) scale(0.9);
    z-index: 4;
}
.carousel__item[data-pos="1"] {
    transform: translateX(40%) scale(0.9);
    z-index: 4;
}
.carousel__item[data-pos="-2"], .carousel__item[data-pos="2"] {
    opacity: 0.4;
    filter: blur(3px) grayscale(20%);
}
.carousel__item[data-pos="-2"] {
    transform: translateX(-70%) scale(0.8);
    z-index: 3;
}
.carousel__item[data-pos="2"] {
    transform: translateX(70%) scale(0.8);
    z-index: 3;
}

JavaScript Code

Create a file script.js and paste the code below.

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

Final Output

Gradient Cards Carousel using HTML CSS and JavaScript

Written by: Piyush Patil

Code Credits: frise

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖