JavaScript Card Slider

Publish Your Code Need a Website?

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

Product card shop

UNO Card HTML CSS Example

index.html

styles.css

main.js

Recommended

Product card shop

UNO Card HTML CSS Example

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js