Carrousel de cartes JavaScript

6,670 DeveloperUI

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 June 2025

Un code par diomankeita001

16 April 2025

Un code par anhtuanle2004yst

29 November 2024

Un code par efficientapp58

HTML

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