The simplest CSS Play auto slideshow to date.

Only CSS and HTML, no javascript, jQuery or any other version of CSS.

This slideshow uses a simple @keyframes animation for the @container width in cqw size, together with a transition to give a smooth scroll between slides.

All the variables are held as CSS variables. All you need to do is update the CSS depending on the number of images, sizes and timings.

The HTML is:

<div id="outer"
  <div id="inner">
    <div id="slide">
      <img src="rooms/room1.jpg">
      <img src="rooms/room2.jpg">
      <img src="rooms/room3.jpg">
      <img src="rooms/room4.jpg">
      <img src="rooms/room5.jpg">
      <img src="rooms/room6.jpg">
      <img src="rooms/room7.jpg">
    </div>
  </div>
</div>

The CSS stylesheet is:

:root {
  /* set up slideshow */
  --images: 7; /* number of images */
  --slide: 1.5s; /* sliding time */
  --still: 4.5s; /* still time */
  --aspect: 3/2; /* image aspect ratio */
  
  /* do not alter */
  --total: calc(var(--slide) + var(--still));
  --frame: calc(var(--total) * var(--images));
 }

#outer {
 container: out / size;
 width:750px;
 max-width:95%;
 aspect-ratio:var(--aspect);
 margin:50px auto;
 overflow:hidden;
 border:1px solid #000;
}

#inner {
 container: update / size;
 height:100cqh;
 position:relative;
 animation:slide1a steps(var(--images)) var(--frame) infinite;
}

#slide {
 position:absolute;
 display:flex;
 flex-wrap:nowrap;
 height:100cqh;
 left:-100cqw;
 transition:var(--slide);
}

#slide img {
 display:inline-block;
 height:100cqh;
 padding:0;
 margin:0;
}

@keyframes slide1a {
 0% {width:0cqw;} 
 100% {width:calc(var(--images) * 100cqw);}
}