CSS image slider (no JavaScript)

Question

HTML / CSS Slider. No JavaScript.

Wanted to make an all CSS Image Slider. Though there are plenty of pre-made options setup a lot seem clunky or add a lot to load time. Have ideas for some more detailed ones, with and without JavaScript, but wanted to make a basic one first and get any feedback.

CodePen: https://codepen.io/LouBagel/pen/rgKXeY

HTML:

<div class='slider-container'>
  <div class='slide'><p>CSS Slider</p></div>
  <div class='slide'><p>No JavaScript</p></div>
  <div class='slide'><p>Manual Setup</p></div>
  <div class='slide'><p>Tedious to Update</p></div>
</div>

CSS:

.slider-container{
  width: 100%;
  height: 500px; /* can be set based on design */
  background: red; /* to test if background shows */
  overflow: hidden; /* to hide slides that are off */
  position: relative; /* since slides are absolute */
  box-shadow: 0 2px 10px black;
}

.slide{
  /* positioning all slides normal position to full size of slider and in view */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  animation: 12s linear infinite sliderAnimation;
  /*
  animation-name: sliderAnimation;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  */

  border: 20px solid #1d1e22; /* thought it looked good */
  box-sizing: border-box; /* to keep total width at 100% */

  box-shadow: inset 0 0 20px black; /* inset shadow on the slides */

  display: flex;  /* to position the text inside*/
}

.slide:first-of-type{
  /* City */
  background: no-repeat 50% 20%/cover url('https://i.imgur.com/zN8znQk.jpg');
  /* positioning for the text inside */
  justify-content: flex-end;
  align-items: flex-start;
}
.slide:nth-of-type(2){
  /* Nature Bridge */
  background: no-repeat center/cover url('https://i.imgur.com/qtwGd3b.jpg');

  /* 12s - 9s = 3s... Will start after 3s */
  animation-delay: -9s;
}

.slide:nth-of-type(3){
  /* Painting */
  background: no-repeat center/cover url('https://i.imgur.com/Qxdy5Ue.jpg');
  /* Will start after 6s */
  animation-delay: -6s;

  /* positioning for the text inside */
  justify-content: flex-end;
  align-items: center;
}
.slide:last-of-type{
  /* Coffee */
  background: no-repeat bottom/cover url('https://i.imgur.com/UyWlZtO.jpg');
  /* Will start after 9s */
  animation-delay: -3s;

  /* positioning for the text inside */
  justify-content: center;
  align-items: center;
}

@keyframes sliderAnimation{
  /* 4 slides, 20% in place and 5% transition time = 100% */
  0%{transform: translateX(0); opacity: 1;} /* starts in view */
  20%{transform: translateX(0); opacity: 1;} /* stays in view */
  25%{transform: translateX(-100%); opacity: 1;} /* slides out left */
  70%{transform: translateX(-100%); opacity: 0;} /* Doesn't matter at what percent: changes to transparent so can't see it travel back across to the right. */
  71%{transform: translateX(100%); opacity: 0;} /* Doesn't matter at what percent: moves off right */
  95%{transform: translateX(100%); opacity: 1;} /* Becomes transparent and Ready to slide on from the right */
}

.slide p{
  /*style for the text*/
  margin: 5vw;
  font-size: 3vw;
  color: white;
  text-shadow: 0.1vw 0.1vw black;
  font-family: Arial Black, Georgia, Garamond, Palatino, Trebuchet MS, Verdana;
}

.slide:last-of-type p{
  /* because white text on white background */
  text-shadow: 0 0 15px black;
}
body{
  margin: 0;
  background: #3f4351;
  max-width: 100%;
}

Note: animation-delays are set to negative values as that causes them to be placed backwards into the animation. If positive values they will sit in starting position and not slide in on first round.

Pros & Cons (IMO)

Pros:

• Quick Loading
• No Repaint (since using transform: translate)

Cons:

• No buttons for user to control
• Tedious to make changes, especially if changing quantity of slides

Answer 1

I like the bare bones idea you have with creating this carousel - only CSS and HTML.

Some friendly suggestions: I would make the images smaller, and not take up the whole page.

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

Here is a Codepen link of the idea I was talking about.