Carrusel de tarjetas JavaScript

6,579 DeveloperUI

Abrir en el editor Publica tu código

Recomendado

26 February 2025

Un código de securearray494

22 April 2025

Un código de andres.stahr

27 December 2024

Una página de inicio creada con directorios.

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