title: Combine W3 css slider/carousels - multiple images changing automatically
body: <p>W3's <a href="https://www.w3schools.com/w3css/w3css_slideshow.asp" rel="nofollow noreferrer">CSS slider page</a> has examples of two image sliders: </p>
  
  <ul>
  <li>one that change a single image <a href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr" rel="nofollow noreferrer">automatically on a timer</a>; </li>
  <li>and one that displays <a href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two" rel="nofollow noreferrer">two images at once</a> but requires a click to display the next image. </li>
  </ul>
  
  <p>I'd like to display a block of four images in a row, that each changes on a timer to an image from the same folder - e.g. </p>
  
  <pre><code>+---+---+---+---+       +---+---+---+---+       +---+---+---+---+
  | 1 | 2 | 3 | 4 |  -&gt;   | 5 | 6 | 7 | 8 |  -&gt;   | 9 | 10| 11| 12|
  +---+---+---+---+       +---+---+---+---+       +---+---+---+---+
  </code></pre>
  
  <p>How can I combine the JS code from the two W3 examples to do this?</p>