Card Carousel JavaScript

6,671 DeveloperUI

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Javascript Card Slider Template</title>
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <div class='cards-wrapper'>
      <div class='cards'>
        <button class='card card1' tabindex="-1">
          <h2>1</h2>
        </button>
        <button class='card card2' tabindex="-1">
          <h2>2</h2>   
        </button>
        <button class='card card4' tabindex="-1">
          <h2>3</h2> 
        </button> 
        <button class='card card5' tabindex="-1">
          <h2>4</h2>  
        </button>
      </div>
      <button class="arrow-btn arrow-btn-prev" tabindex="0">
        <svg viewBox="0 0 256 512">
          <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" />
        </svg>
      </button>
      <button class="arrow-btn arrow-btn-next" tabindex="0">
        <svg viewBox="0 0 256 512">
          <path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" />
        </svg>
      </button>
    </div>
    <script src="/js/main.js"></script>
  </body>
</html>

CSS

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

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#eee;
}

.cards-wrapper {
  width:100%;
  height:300px;
  max-width:1200px;
  overflow-x:hidden;
  position:relative;
}

.cards {
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-110px);
  display:flex;
  flex-direction:row;
  width:1300px;
  justify-content:space-between;
}

.card {
  width:220px;
  height:260px;
  border-radius:14px;
  border:none;
  font-family: 'Open Sans', sans-serif;
  cursor:pointer;
  box-sizing:border-box;
  color:#000;

}

.card h2 {
  font-size:2.6em;
  font-weight:300;
}

.cards-wrapper::after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  width:100%;
  max-width:1200px;
  height:100%;
  background:linear-gradient(90deg, #eee 0%, #ffffff00 30%, #ffffff00 70%, #eee 100%);
  pointer-events:none;
}

.arrow-btn {
  width:40px;
  height:40px;
  background:#fff;
  border-radius:50%;
  border:none;
  box-shadow: 0 6px 8px #00000030;
  position:absolute;
  top:50%;
  left:20px;
  transform:translateY(-50%);
  z-index:1000;
  cursor:pointer;
}

.arrow-btn-next {
  left:auto;
  right:20px;
}

.arrow-btn svg {
  fill:#333;
  position:absolute;
  height:80%;  
  left:50%;
  top:50%;
  transform:translate(-60%,-50%);
}

.arrow-btn-next svg {
  transform:translate(-40%,-50%);
}

const arrowBtns = document.querySelectorAll('.arrow-btn');
const cardBtns = document.querySelectorAll('.card');
let currentCard = 2;
let dir = 1;
moveCards();

arrowBtns.forEach((btn, i) => {
  applyPointerEffect(btn, 'expo', '0 3px 4px #00000050');
  btn.onclick = () => {
    dir = (i == 0) ? 1 : -1;
    currentCard += (i === 0) ? -1 : 1;
    currentCard = Math.min(4, Math.max(0, currentCard));
    moveCards(0.75);
  };
});

cardBtns.forEach((btn, i) => {
  applyPointerEffect(btn, 'power3', () => (i === currentCard) ? '0 6px 11px #00000030' : '0 0px 0px #00000030');
  btn.onclick = () => {
    dir = (i < currentCard) ? 1 : -1;
    currentCard = i;
    moveCards(0.75);
  };
});

function moveCards(dur = 0) {
  gsap.timeline({ defaults: { duration: dur, ease: 'power3', stagger: { each: -0.03 * dir } } })
    .to('.card', {
      x: -270 * currentCard,
      y: (i) => (i === currentCard) ? 0 : 15,
      height: (i) => (i === currentCard) ? 270 : 240,
      ease: 'elastic.out(0.4)'
    }, 0)
    .to('.card', {
      cursor: (i) => (i === currentCard) ? 'default' : 'pointer',
      'box-shadow': (i) => (i === currentCard) ? '0 6px 11px #00000030' : '0 0px 0px #00000030',
      border: (i) => (i === currentCard) ? '2px solid #26a' : '0px solid #fff',
      background: (i) => (i === currentCard) ? 'radial-gradient(100% 100% at top, #fff 0%, #fff 99%)' : 'radial-gradient(100% 100% at top, #fff 20%, #eee 175%)',
      ease: 'expo'
    }, 0)
    .to('.icon svg', {
      attr: {
        stroke: (i) => (i === currentCard) ? 'transparent' : '#36a',
        fill: (i) => (i === currentCard) ? '#36a' : 'transparent'
      }
    }, 0)
    .to('.arrow-btn-prev, .arrow-btn-next', {
      autoAlpha: (i) => (i === 0 && currentCard === 0) || (i === 1 && currentCard === 4) ? 0 : 1
    }, 0)
    .to('.card h4', {
      y: (i) => (i === currentCard) ? 0 : 8,
      opacity: (i) => (i === currentCard) ? 1 : 0,
    }, 0);
}

Card Carousel JavaScript

Recommended