Template:Slideshow

 <button class="prev">Prev</button>
 <button class="next">Next</button>

 <img src="https://example.com/image1.jpg" alt="Image 1">
 <img src="https://example.com/image2.jpg" alt="Image 2">

<script>

 // Get the slideshow elements
 const slideshow = document.querySelector('.slideshow');
 const prevButton = document.querySelector('.prev');
 const nextButton = document.querySelector('.next');
 const imageContainers = document.querySelectorAll('.image-container');

 // Set up event listeners for buttons
 prevButton.addEventListener('click', showPreviousImage);
 nextButton.addEventListener('click', showNextImage);

 // Initialize the slideshow with the first image
 let currentImageIndex = 0;
 imageContainers[currentImageIndex].appendChild(slideShowImages[0]);

 // Function to show the previous image
 function showPreviousImage() {
   if (currentImageIndex > 0) {
     currentImageIndex--;
     updateSlideshow();
   }
 }

 // Function to show the next image
 function showNextImage() {
   if (currentImageIndex < slideShowImages.length - 1) {
     currentImageIndex++;
     updateSlideshow();
   }
 }

 // Function to update the slideshow
 function updateSlideshow() {
   const imageContainer = document.querySelector(`#image-${currentImageIndex}`);
   imageContainer.innerHTML = ;
   imageContainers[currentImageIndex].appendChild(slideShowImages[currentImageIndex]);
 }

</script>

 <img src="https://example.com/image1.jpg" alt="Image 1">

 <img src="https://example.com/image2.jpg" alt="Image 2">