JavaScript Slideshow Examples

Introduction to JavaScript Slideshows

JavaScript slideshows are an essential feature for modern websites. They allow you to showcase multiple images or content sections in an engaging way. With JavaScript, you can create slideshows with manual navigation, automatic transitions, thumbnails, and more.

Key slideshow features:

Manual navigation with previous/next buttons
Automatic transitions with timing controls
Thumbnail navigation for direct access
Transition effects (fade, slide, zoom)
Responsive design for all devices

Example 1: Manual Slideshow

This manual slideshow allows users to navigate between slides using previous and next buttons. It demonstrates basic DOM manipulation and array handling.

// Manual Slideshow Implementation
const slides = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg', 'banner4.jpg'];
let currentSlide = 0;
const slideElement = document.getElementById('manualSlide');

function showSlide(n) {
    // Update current slide index
    currentSlide += n;
    
    // Handle boundaries
    if (currentSlide >= slides.length) currentSlide = 0;
    if (currentSlide < 0) currentSlide = slides.length - 1;
    
    // Update slide display
    slideElement.style.backgroundImage = `url(${slides[currentSlide]})`;
}

// Initialize first slide
showSlide(0);

Manual Slideshow Demo

Example 2: Automatic Slideshow

An automatic slideshow that transitions between slides every 3 seconds. Users can pause and resume the slideshow.

// Automatic Slideshow Implementation
const autoSlides = [
    'https://via.placeholder.com/800x400/4a6fa5/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/6f4a5f/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/5f6f4a/ffffff?text=Slide+3',
    'https://via.placeholder.com/800x400/4a5f6f/ffffff?text=Slide+4'
];

let currentAutoSlide = 0;
let slideInterval;
const autoSlideElement = document.getElementById('autoSlide');
const playPauseBtn = document.getElementById('playPauseBtn');

function startSlideShow() {
    slideInterval = setInterval(() => {
        currentAutoSlide = (currentAutoSlide + 1) % autoSlides.length;
        updateAutoSlide();
    }, 3000);
    playPauseBtn.innerHTML = ' Pause';
}

function stopSlideShow() {
    clearInterval(slideInterval);
    playPauseBtn.innerHTML = ' Play';
}

function updateAutoSlide() {
    autoSlideElement.style.opacity = 0;
    setTimeout(() => {
        autoSlideElement.style.backgroundImage = `url(${autoSlides[currentAutoSlide]})`;
        autoSlideElement.style.opacity = 1;
    }, 500);
}

function toggleSlideShow() {
    if (slideInterval) {
        stopSlideShow();
    } else {
        startSlideShow();
    }
}

// Initialize slideshow
autoSlideElement.style.backgroundImage = `url(${autoSlides[0]})`;
autoSlideElement.style.transition = 'opacity 0.5s ease-in-out';
startSlideShow();

Automatic Slideshow Demo

Auto-play

Example 3: Slideshow with Thumbnails

This slideshow includes thumbnail navigation for direct access to specific slides. Clicking a thumbnail displays that slide in the main view.

// Thumbnail Slideshow Implementation
const slidesWithThumbs = [
    { main: 'banner1.jpg', thumb: 'thumb1.jpg' },
    { main: 'banner2.jpg', thumb: 'thumb2.jpg' },
    { main: 'banner3.jpg', thumb: 'thumb3.jpg' },
    { main: 'banner4.jpg', thumb: 'thumb4.jpg' }
];

const thumbSlideElement = document.getElementById('thumbSlide');
const thumbnailsContainer = document.getElementById('thumbnails');

function initThumbSlideshow() {
    // Create thumbnails
    slidesWithThumbs.forEach((slide, index) => {
        const thumb = document.createElement('div');
        thumb.className = 'thumbnail';
        thumb.style.backgroundImage = `url(${slide.thumb})`;
        thumb.onclick = () => showThumbSlide(index);
        thumbnailsContainer.appendChild(thumb);
    });
    
    // Show first slide
    showThumbSlide(0);
}

function showThumbSlide(index) {
    // Update main slide
    thumbSlideElement.style.backgroundImage = `url(${slidesWithThumbs[index].main})`;
    
    // Update active thumbnail
    const thumbnails = document.querySelectorAll('.thumbnail');
    thumbnails.forEach((thumb, i) => {
        thumb.classList.toggle('active', i === index);
    });
}

// Initialize slideshow
initThumbSlideshow();