<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bibliothèque Musicale - Slider Static</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
</head>

<body>
  <div class="container">
    <h2 class="section-title mb-3">Albums</h2>
    <div class="swiper-container album-slider-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=1" alt="Album 1">
              <div class="card-body">Album 1</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=2" alt="Album 2">
              <div class="card-body">Album 2</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=3" alt="Album 3">
              <div class="card-body">Album 3</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=4" alt="Album 4">
              <div class="card-body">Album 4</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=5" alt="Album 5">
              <div class="card-body">Album 5</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=6" alt="Album 6">
              <div class="card-body">Album 6</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src=https://picsum.photos/200/200?random=7" alt="Album 7">
              <div class="card-body">Album 7</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=8" alt="Album 8">
              <div class="card-body">Album 8</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=9" alt="Album 9">
              <div class="card-body">Album 9</div>
            </div>
          </a>
        </div>
        <div class="swiper-slide">
          <a href="#" class="text-decoration-none">
            <div class="card-item">
              <img src="https://picsum.photos/200/200?random=10" alt="Album 10">
              <div class="card-body">Album 10</div>
            </div>
          </a>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</body>
body {
  font-family: "Poppins", sans-serif;
  background-color: #111;
  color: #fff;
  margin: 0;
  padding-top: 80px;
  overflow-x: hidden;
}

.song-slider-container,
.artist-slider-container,
.album-slider-container {
  display: flex;
  align-items: center;
  position: relative;
  margin: 1vh 0 0 0;
}

.card-item {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  color: white;
  display: flex;
  align-items: flex-end;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.card-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.card-body {
  width: 100%;
  text-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1rem;
}

.swiper-container {
  position: relative;
  margin: 20px 0;
}
.swiper-container .swiper-slide {
  width: 200px !important;
}
.swiper-button-prev,
.swiper-button-next {
  color: white;
}

document.addEventListener("DOMContentLoaded", () => {
  var albumSwiper = new Swiper(".album-slider-container", {
    slidesPerView: "auto",
    spaceBetween: 20,
    slidesPerGroup: 1,
    resistanceRatio: 0.85,
    threshold: 20,
    navigation: {
      nextEl: ".album-slider-container .swiper-button-next",
      prevEl: ".album-slider-container .swiper-button-prev"
    },
    freeMode: false
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.