How to Build a Carousel in Pure Javascript

As a minimalist, here I share the smallest Vanilla JS carousel coding technique.

I am going to show images within a list, <ul> and <li>. Then, I display these images horizontally with CSS. Next, I add two buttons to navigate among images. Finally, I code 7 lines of Javascript to complete this carousel.

Sounds simple? Let’s go.

1. Show Images

    <ul>
      <li><img class="img1" src="//picsum.photos/300/200?1"></li>
      <li><img class="img2" src="//picsum.photos/300/200?2"></li>
      <li><img class="img3" src="//picsum.photos/300/200?3"></li>
      <li><img class="img4" src="//picsum.photos/300/200?4"></li>
      <li><img class="img5" src="//picsum.photos/300/200?5"></li>
      <li><img class="img6" src="//picsum.photos/300/200?6"></li>
      <li><img class="img7" src="//picsum.photos/300/200?7"></li>
      <li><img class="img8" src="//picsum.photos/300/200?8"></li>
      <li><img class="img9" src="//picsum.photos/300/200?9"></li>
    </ul>

2. Style images

ul { display: flex; margin: 0; padding: 0; overflow: hidden; }
li { display: block; list-style: none; }

3. Add buttons to navigate

<button onclick="show(-1)">&lt;</button>
<button…