Deslizador de tarjetas

Publica tu código

Recomendado

1 July 2025

Formulario de contacto moderno con degradado

1 October 2023

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webleb</title>
  <link rel="stylesheet" href="/css/styles.css">

</head>
<body>
  <div class="slider" x-data="{start: true, end: false}" style="padding-top: 150px;">
    <div class="slider__content" x-ref="slider" x-on:scroll.debounce="$refs.slider.scrollLeft == 0 ? start = true : start = false; Math.abs(($refs.slider.scrollWidth - $refs.slider.offsetWidth) - $refs.slider.scrollLeft) < 5 ? end = true : end = false;">
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales.svg" alt="Image">
        <div class="slider__info">
          <h2>Card 1</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/flat-mountains.png" alt="Image">
        <div class="slider__info">
          <h2>Card 2</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_japanese-pattern-2_1_2_0-0_0_1__ffffff00_000000.png" alt="Image">
        <div class="slider__info">
          <h2>Card 3</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_japanese-pattern-3_1_5_0-0_0_1__2a2b37_c5c4ca.png" alt="Image">
        <div class="slider__info">
          <h2>Card 4</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales (3).svg" alt="Image">
        <div class="slider__info">
          <h2>Card 5</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/liquid-cheese.png" alt="Image">
        <div class="slider__info">
          <h2>Card 6</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/pattern_circles-1_1_16_0-0_0_1__2a2b37_ffeba8_ffeba8.png" alt="Image">
        <div class="slider__info">
          <h2>Card 7</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/dragon-scales (2).svg" alt="Image">
        <div class="slider__info">
          <h2>Card 8</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/protruding-squares.png" alt="Image">
        <div class="slider__info">
          <h2>Card 9</h2>
        </div>
      </div>
      <div class="slider__item">
        <img class="slider__image" src="/img/radiant-gradient.png" alt="Image">
        <div class="slider__info">
          <h2>Card 10</h2>
        </div>
      </div>
    </div>
    <div class="slider__nav" style="display: flex;justify-content: center;">
      <button class="slider__nav__button" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth * -1, behavior: 'smooth'});" x-bind:class="start ? '' : 'slider__nav__button--active'">Previous</button>
      <button class="slider__nav__button" x-on:click="$refs.slider.scrollBy({left: $refs.slider.offsetWidth, behavior: 'smooth'});" x-bind:class="end ? '' : 'slider__nav__button--active'">Next</button>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.2/cdn.js"></script>
</body>
</html>

styles.css

:root {
  --scrollcolor: #fff;
  --scrollbackground: #141e27;
}
* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  height: 100vh;
}
body {
  background: #203239;
}
.title {
  font-size: 2.5rem;
  font-family: system-ui;
  line-height: 1.1;
  font-weight: 300;
  color: #fff;
  margin: 4rem auto 1rem;
  width: 85%;
  max-width: 1280px;
}
.slider {
  width: 85%;
  max-width: 1280px;
  margin: 0 auto;
}
.slider__content {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  scrollbar-color: var(--scrollcolor) var(--scrollbackground);
}
.slider__content::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 1rem;
  background: var(--scrollbackground);
}
.slider__content::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background: var(--scrollcolor);
}
.slider__content::-webkit-scrollbar-track {
  border-radius: 1rem;
  background: var(--scrollbackground);
}
.slider__item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 100%;
  width: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}
@media (min-width: 460px) {
  .slider__item {
    aspect-ratio: 0.6666666667;
    min-width: calc((100% / 2) - 2rem);
 }
}
@media (min-width: 940px) {
  .slider__item {
    min-width: calc((100% / 3) - 4rem);
 }
}
.slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.slider__info {
  position: relative;
  padding: 4rem 2rem 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(32, 50, 57, 0));
}
.slider__info h2 {
  color: #fff;
  font-family: system-ui;
  line-height: 1.1;
  font-weight: 300;
  font-size: 1.75rem;
  margin: 0;
}
.slider__nav {
  margin: 1rem 0 4rem;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  align-content: center;
  align-items: center;
  pointer-events: none;
}
@media (min-width: 460px) {
  .slider__nav {
    justify-content: flex-end;
 }
}
.slider__nav__button {
  margin: 0;
  appearance: none;
  border: 0;
  border-radius: 2rem;
  background: #fff;
  color: #203239;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 1;
  pointer-events: none;
  transition: 0.2s ease-out;
  opacity: 0.25;
}
.slider__nav__button--active {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

Deslizador de tarjetas

Recomendado

Formulario de contacto moderno con degradado

Efecto de texto brillante

Rueda de la fortuna

index.html

styles.css

main.js

Recomendado

Formulario de contacto moderno con degradado

Efecto de texto brillante

Rueda de la fortuna

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js