Author: | trandrew96 |
---|---|
Views Total: | 3,113 views |
Official Page: | Go to website |
Last Update: | May 7, 2022 |
License: | MIT |
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:
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; }