Add more images and random start

index.html

@@ -26,12 +26,12 @@ img {vertical-align: middle;}
       }
 
       @-webkit-keyframes fade {
-  from {opacity: .4}
+        from {opacity: .2}
         to {opacity: 1}
       }
 
       @keyframes fade {
-  from {opacity: .4}
+        from {opacity: .2}
         to {opacity: 1}
       }
     </style>
@@ -55,11 +55,26 @@ img {vertical-align: middle;}
       <div class="mySlides fade">
         <img src="images/5.jpg">
       </div>
+      <div class="mySlides fade">
+        <img src="images/6.jpg">
+      </div>
+      <div class="mySlides fade">
+        <img src="images/7.jpg">
+      </div>
+      <div class="mySlides fade">
+        <img src="images/8.jpg">
+      </div>
+      <div class="mySlides fade">
+        <img src="images/9.jpg">
+      </div>
+      <div class="mySlides fade">
+        <img src="images/10.jpg">
+      </div>
 
     </div>
 
     <script>
-      var slideIndex = 0;
+      var slideIndex = Math.floor(Math.random() * 10);
       showSlides();
 
       function showSlides() {
@@ -71,7 +86,7 @@ function showSlides() {
         slideIndex++;
         if (slideIndex > slides.length) {slideIndex = 1}
         slides[slideIndex-1].style.display = "block";
-  setTimeout(showSlides, 5000); // Change image every 2 seconds
+        setTimeout(showSlides, 3500); // Change image every 3 seconds
       }
     </script>