CSS carousel

by Julien Roche

HTML

<h1>Without options</h1>
<section class="carousel">
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
</section>
<h1>Button mode + hide scrollbar</h1>
<section class="carousel carousel--button carousel-hide-scrollbar">
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
  <article class="carousel__item"></article>
</section>
<h1>Marker mode + hide scrollbar</h1>
<section class="carousel carousel--marker carousel-hide-scrollbar">
  <article class="carousel__item"></article>
 ...

CSS

html,
body {
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

html {
  height: 100%;
  scrollbar-gutter: stable;
}

.carousel {
  align-items: center;
  border: 1px solid black;
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
  height: 6rem;
  margin: 2rem 2rem 4rem 2rem;
  padding: 0 1rem;

  & > .carousel__item {
    border: 1px dotted black;
    height: 4rem;
    width: 4rem;
    background-repeat: no-repeat;
    background-size: cover;

    &:nth-child(n) {
      background-image: url(https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=1981&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(2n) {
      background-image: url(https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(3n) {
      background-image: url(https://plus.unsplash.com/premium_photo-1675252369719-dd52bc69c3df?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(4n) {
      background-image: url(https://images.unsplash.com/photo-1555939594-58d7cb561ad1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(5n) {
      background-image: url(https://images.unsplash.com/photo-1484723091739-30a097e8f929?q=80&w=1547&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(6n) {
      background-image: url(https://images.unsplash.com/photo-1565958011703-44f9829ba187?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    }

    &:nth-child(7n) {
      background-image:...

JavaScript

// https://developer.chrome.com/blog/carousels-with-css
// https://chrome.dev/carousel-configurator/
// https://flackr.github.io/carousel/
// https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow/Carousels