carousel.css

   /* Reset CSS */

* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

   /* Container */

.container {
   max-width: 720px;
   margin: 0 auto;
   padding: 30px 15px;
}

/* * * * * * * * * * * * * * * * * * * * * * * *
 * Carousel
 */

   /* Frame */
 
.carousel {
   display: block;
   width: 100%;
   padding-top: 56%;

   background-color: lightgray;
}

   /* Images */

.carousel-image {
   width: 100%;
   height: auto;
}

   /* Positioning Images */

.carousel {
   position: relative;
}

.carousel-image {
   position: absolute;
   top: 0;
   left: 0;
}

   /* Images States */

.carousel {
   overflow-x: hidden;
}

.carousel-image {
   transition: left 0.9s;
}

.carousel-image {
   left: -100%;
}

.carousel-indicator:checked ~ .carousel-image {
   left: 100%;
}

.carousel-indicator:checked + .carousel-image {
   left: 0;
}

   /* Positioning indicators */

.carousel {
   text-align: center;
   word-spacing: 9px;
}

.carousel-indicator {
   position: relative;
   bottom: 24px;
}

.carousel {
   padding-top: 54%;
}

.carousel-image {
   z-index: 1;
}

.carousel-indicator {
   z-index: 2;
}

   /* Buttons */

.carousel-button {
   background-color: whitesmoke;
   border: 1px solid lightgray;
   border-radius: 50%;

   display: inline-block;
   width: 42px;
   height: 42px;

   cursor: pointer;
}

.carousel-button::before {
   content: "\21FD";
}

.carousel-indicator:checked ~ .carousel-button::before {
   content: "\21FE";
}

.carousel-button::before,
.carousel-indicator:checked ~ .carousel-button::before {
   line-height: 42px;
}

   /* Positioning Buttons */

.carousel-button {
   position: absolute;
   z-index: 2;
   bottom: 12px;
}

.carousel-button {
   left: 9px;
   right: auto;
}

.carousel-indicator:checked ~ .carousel-button {
   left: auto;
   right: 9px;
}

.carousel-indicator:checked + .carousel-image + .carousel-button {
   display: none;
}

.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(1) { z-index: 2; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(2) { z-index: 3; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(3) { z-index: 4; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(4) { z-index: 5; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(5) { z-index: 6; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(6) { z-index: 7; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(7) { z-index: 8; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(8) { z-index: 9; }
.carousel-indicator:checked ~ .carousel-button:nth-last-of-type(9) { z-index: 10; }