🎞️ How to Create an Auto Slideshow

Let’s create a slideshow in JavaScript that switches images every 3 seconds!

🏖 Travel & Tourism Sites: Automatically showcase recommended spots
🏪 Product Showcases: Auto-switching banners for new or sale items
👶 Photo Galleries: Auto-play for events and memory photos

💡 How the Slideshow Works

The JavaScript code below organizes image paths in an array,
and uses setInterval() to switch images in order every few seconds.
Initially, only one image is shown, but after the page loads, the slideshow automatically transitions to the next image—the basic structure of an auto slideshow.

<script>
const images = [
  "/assets/images/sample1.jpg",
  "/assets/images/sample2.jpg",
  "/assets/images/sample3.jpg"
  // Absolute path for server (example):
  // "https://yourdomain.com/assets/images/sample1.jpg"
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 3000); // Switch every 3 seconds
</script>

👇 Example Output 👇

📏 Handling Different Image Sizes

If the images vary in size (e.g., tall or square), their height can cause the overall layout (especially below text) to shift.

In such cases, fix the height and use object-fit to trim or pad the images accordingly.

💡 Method 1: Crop to Equal Height (object-fit: `cover`)

📸 Zoom and crop centered on the image
✨ Visually uniform and clean appearance
🪄 Similar to Instagram-style rendering

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Auto Slideshow Demo</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ Auto Slideshow Demo</h1>
    <img id="slideshow" class="slideshow" src="/assets/images/sample1.jpg" alt="Slideshow Image">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // Switch every 3 seconds
  </script>
</body>
</html>

👇 Result 👇

💡 Method 2: Add top and bottom padding to show the full image (object-fit: `contain`)

🖼 Shows the entire image edge to edge
⬜ Aligns height using empty space
🔲 Useful when you want to display it like a thumbnail

Even if the images have different heights, each photo is fully displayed.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Slideshow (contain)</title>
  <style>
    .slideshow {
      width: 100%;
      height: 400px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎞️ Slideshow (object-fit: contain)</h1>
    <img id="slideshow-contain" class="slideshow" src="/assets/images/sample1.jpg" alt="Slideshow Image">
  </div>

  <script>
    const images = [
      "/assets/images/sample1.jpg",
      "/assets/images/sample2.jpg",
      "/assets/images/sample3.jpg"
    ];
    let currentIndex = 0;

    function showNextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      document.getElementById("slideshow-contain").src = images[currentIndex];
    }

    setInterval(showNextImage, 3000); // Switch every 3 seconds
  </script>
</body>
</html>

👇Here's how it looks👇

🖐 Improve UX with Auto + Manual Slide Control

Instead of just auto-playing the slideshow, adding manual navigation lets users control timing—a more flexible UI.

By adding buttons like below, you can greatly improve interactivity and control:

◀️ Prev button to go to the previous image
▶️ Next button for manual skip
⏸ A Pause function makes it perfect

This lets users enjoy auto-play flow while also interacting at their own pace.
Especially in product showcases or photo galleries, manual controls respond to “I want to look more closely” needs.

You can easily implement pause/resume logic using JavaScript’s clearInterval() and setInterval().
Combine auto-play with user controls to build a more polished slideshow UI!