Create slideshow with image navigation

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>版本2 - innerHTML + 陣列</title>
</head>
<body>
  <div id="photoContainer"></div>
  <br><br>
  <button onclick="showPrev()">上一張</button>
  <button onclick="showNext()">下一張</button>

  <script>
    const photos = ["http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg", 
                    "http://4.bp.blogspot.com/-UKB9Pburh8I/Ujawb7t3wGI/AAAAAAAABcE/2h3OMM1sb-0/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg", 
                    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJYAY6cEyvTthq9s3Pz3RCayzcOM7UVffF8cmCk0XZBaAz7O6tLktSa7e1_f7Ni_ZxZaD8p4tLzqzhqnHo8rnsKuYvhPflJr2mAZeOSayg3sHjXCrrOtJ7cqPP6OdZAEJsHYJ5QWPTXw/s640/R0010396.JPG"];
    let index = 0;
    const container = document.getElementById("photoContainer");

    function updateView() {
      container.innerHTML = '<img src="' + photos[index] + '" width="300">';
    }

    function showPrev() {
      if (index > 0) {
        index = index - 1;
        updateView();
      }
    }

    function showNext() {
      if (index < photos.length - 1) {
        index = index + 1;
        updateView();
      }
    }

    updateView(); // 初始顯示
  </script>
</body>
</html>