JavaScript Card Slider

Publish Your Code

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

JavaScript Card Slider

Recommended

download app card

Home Image Slider Effect Website

Character choose with preview card animation (CSS sprites)

index.html

styles.css

main.js

Recommended

download app card

Home Image Slider Effect Website

Character choose with preview card animation (CSS sprites)

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js