<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <title>Slide Show</title>
<body>
<div class="w3-container w3-padding w3-gray"> <div class="w3-content w3-card w3-white w3-padding w3-margin-top w3-display-container" style="max-width:800px"> <div class="w3-display-container mySlides">
<img src="

Photo1

"style="width:100%"> <div class="w3-display-bottommiddle w3-small w3-container w3-white"><p>First Photo.</p></div>

</div> <div class="w3-display-container mySlides">
<img src="

Photo2

"style="width:100%">

</div> <div class="w3-display-container mySlides">
<img src="

Photo3

"style="width:100%">

</div> <div class="w3-display-container mySlides">
<img src="

Photo4

"style="width:100%">

</div> <div class="w3-display-container mySlides">
<img src="

Photo5

"style="width:100%">

</div> <div class="w3-display-container mySlides">
<img src="

Photo6

"style="width:100%"> <div class="w3-display-bottommiddle w3-small w3-container w3-white"><p>Last Photo.</p></div>

</div> </div> <br> <div class="w3-center"> <div class="w3-section"> <button class="w3-button w3-red" onclick="plusDivs(-1)">< Prev</button>          <button class="w3-button w3-red" onclick="plusDivs(1)">Next ></button> </div> </div> </div> <script> var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } </script> </body> </html>