Slide Show Script
Enable your users to browse your image collection at their own pace. This manual slide show script provides standard "Next" and "Previous" controls for a classic gallery experience.
Interactive Gallery Demo
Image 1 of 3
Copy the Script
<!-- Image Holder -->
<img src="image1.jpg" id="gallery" width="400" height="300">
<!-- Buttons -->
<button onclick="change(-1)">Back</button>
<button onclick="change(1)">Next</button>
<script>
var photos = ["image1.jpg", "image2.jpg", "image3.jpg"];
var pos = 0;
function change(dir) {
pos += dir;
if (pos < 0) pos = photos.length - 1;
if (pos >= photos.length) pos = 0;
document.getElementById("gallery").src = photos[pos];
}
</script>Frequently Asked Questions
While you can use different sizes, it is recommended to crop images to the same aspect ratio to prevent the page layout from "jumping" when the image changes.
This basic version does not, but you can add a simple JavaScript loop to load all images in the array into the browser cache when the page first loads.
The logic included in the snippet automatically handles looping: if you click "Next" on the last image, it returns to the first.
