index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Image carousel</title>
    <script defer src="slideshow.js"></script>
  </head>
  <body>
    <h1>Giraffe Gallery</h1>
    <div id="slideshow">
      <button id="back">&#8592; Back</button>
      <img id="slide" src="" alt="Giraffe" />
      <button id="forward">Forward &#8594;</button>

      <!-- automating the buttons -->
      <div id="auto-controls">
        <button id="auto-back">&#8592; Auto Back</button>
        <button id="stop">Stop</button>
        <button id="auto-forward">Auto Forward &#8594;</button>
      </div>
      
    </div>
  </body>
</html>