Netflix-style Image Carousel With Pure CSS

Preview:

Description:

A pure CSS implementation of the Netflix-style carousel slider with infinite scroll support – there is no JavaScript and super fast loading. A video tutorial can be found here.

See Also:

• Netflix Style Infinite Carousel With Vanilla JavaScript – netflix-slider

How to use it:

1. Add groups of images to the Netflix Carousel.

<div class="media-container">
  <div class="media-scroller">
    <!--   Group 1 -->
    <div class="media-group" id="group-1">
      <div class="media-element">
        <img src="1.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="2.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="3.jpg" alt=""/>
      </div>
      ... more images here ...
      <a class="next" href="#group-2" aria-label="next">
        <svg>
          <use href="#next"></use>
        </svg>
      </a>
    </div>
    <!-- Group 2   -->
    <div class="media-group" id="group-2">
      <a class="previous" href="#group-1">
        <svg>
          <use href="#previous"></use>
        </svg>
      </a>
      <div class="media-element">
        <img src="4.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="5.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="6.jpg" alt=""/>
      </div>
      ... more images here ...
      <a class="next" href="#group-3" aria-label="next">
        <svg>
          <use href="#next"></use>
        </svg>
      </a>
    </div>
    <!-- Group 3   -->
    <div class="media-group" id="group-3">
      <a class="previous" href="#group-2">
        <svg>
          <use href="#previous"></use>
        </svg>
      </a>
      <div class="media-element">
        <img src="7.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="8.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="9.jpg" alt=""/>
      </div>
      ... more images here ...
      <a class="next" href="#group-4" aria-label="next">
        <svg>
          <use href="#next"></use>
        </svg>
      </a>
    </div>
    <!--  Group 4  -->
    <div class="media-group" id="group-4">
      <a class="previous" href="#group-3">
        <svg>
          <use href="#previous"></use>
        </svg>
      </a>
     <div class="media-element">
        <img src="10.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="11.jpg" alt="" />
      </div>
      <div class="media-element">
        <img src="12.jpg" alt=""/>
      </div>
      ... more images here ...
    </div>
    <!-- Pagination Indicators -->
    <div class="navigation-indicators">
      <!-- 4 Groups -->
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

<!-- Navigation Icons -->
<svg>
  <symbol id="next" viewBox="0 0 256 512">
    <path fill="white"
      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" />
  </symbol>
  <symbol id="previous" viewBox="0 0 256 512">
    <path fill="white"
      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" />
  </symbol>
</svg>

2. The main CSS styles for the Netflix Carousel.

.media-container {
  position: relative;
}
.media-scroller,
.media-group {
  display: grid;
  gap: 0.25rem;
  grid-auto-flow: column;
}
.media-scroller {
  overflow-x: hidden;
  scroll-behavior: smooth;
  grid-auto-columns: 100%;
  padding: 0 3rem;
  scroll-padding-inline: 3rem;
}
.media-group {
  grid-auto-columns: 1fr;
}
.media-element {
  border-radius: 0.25rem;
  overflow: hidden;
}
.media-element > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.next,
.previous {
  display: none;
  align-items: center;
  z-index: 10;
  position: absolute;
  width: 3rem;
  padding: 1rem;
  background: rgb(0 0 0 / 0);
  opacity: 0;
}
.previous {
  left: 0;
  top: 0;
  bottom: 0;
}
.next {
  right: 0;
  top: 0;
  bottom: 0;
}
.media-group:first-child :where(.next, .previous) {
  display: flex;
}
.media-scroller:hover :where(.next, .previous) {
  opacity: 1;
}
:where(.next, .previous):hover {
  background: rgb(0 0 0 / 0.3);
}
:where(.next, .previous) > svg {
  transition: transform 75ms linear;
  transform: scale(1);
}
:where(.next, .previous):hover > svg {
  transform: scale(1.2);
}
.media-group:target :where(.next, .previous) {
  display: flex;
}
.media-scroller:has(:target:not(:first-child))
  .media-group:first-of-type
  .next {
  display: none;
}

3. Style the navigation controls.

.navigation-indicators {
  opacity: 0;
  position: absolute;
  display: flex;
  gap: 3px;
  top: -1rem;
  right: 2rem;
}
.navigation-indicators > * {
  width: 1rem;
  height: 2px;
  background: white;
  opacity: 0.5;
}
.media-scroller:has(.media-group:target)
  .navigation-indicators
  > *:nth-child(1) {
  opacity: 0.5;
}
.navigation-indicators > *:nth-child(1),
.media-group:nth-child(1):target ~ .navigation-indicators > *:nth-child(1) {
  opacity: 1;
}
.media-group:nth-child(2):target ~ .navigation-indicators > *:nth-child(2) {
  opacity: 1;
}
.media-group:nth-child(3):target ~ .navigation-indicators > *:nth-child(3) {
  opacity: 1;
}
.media-group:nth-child(4):target ~ .navigation-indicators > *:nth-child(4) {
  opacity: 1;
}
.media-scroller:hover .navigation-indicators {
  opacity: 1;
}