Image Slideshow Creator

Create beautiful image slideshows with advanced features

Back to Tools

Upload Images

Click to upload or drag and drop
Supported formats: JPG, PNG, GIF, WebP

Image Preview

Upload images to see preview

Slideshow Templates

Basic Slideshow
Simple image slideshow
Auto-play • Navigation arrows • Dots indicator
Gallery Style
Gallery with thumbnails
Thumbnail navigation • Fullscreen mode • Image counter
Presentation
Presentation-style slideshow
Title overlay • Description text • Progress bar
Carousel
Carousel-style slideshow
Multiple visible images • Smooth scrolling • Touch support

Slideshow Settings

Theme Settings

Display Settings

Slideshow Preview

Upload images and configure settings to see slideshow preview

Slideshow Controls

Browser Compatibility

Chrome
Full support
Version 60++
Firefox
Full support
Version 55++
Safari
Full support
Version 12++
Edge
Full support
Version 79++

Slideshow Tips

Image Quality

  • Use high-quality images
  • Keep dimensions consistent
  • Choose appropriate formats
  • Optimize for web performance

Slideshow

  • Choose appropriate transitions
  • Set optimal slide duration
  • Use keyboard shortcuts
  • Test on different devices
`; // Download HTML file const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'slideshow-' + new Date().toISOString().slice(0, 19).replace(/:/g, '-') + '.html'; link.click(); showToast('Slideshow exported successfully!', 'success'); } // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (uploadedImages.length === 0) return; switch (e.key) { case 'ArrowLeft': prevSlide(); break; case 'ArrowRight': nextSlide(); break; case ' ': e.preventDefault(); if (isPlaying) { stopSlideshow(); } else { startSlideshow(); } break; case 'Escape': stopSlideshow(); break; } }); // Show toast notification function showToast(message, type = 'success') { const colors = { success: '#27ae60', error: '#e74c3c', warning: '#f39c12', info: '#3498db' }; const toast = document.createElement('div'); toast.style.cssText = ` position: fixed; top: 20px; right: 20px; background: ${colors[type]}; color: white; padding: 1rem 2rem; border-radius: 8px; z-index: 10000; font-weight: 600; animation: slideIn 0.3s ease; max-width: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); `; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { if (document.body.contains(toast)) { document.body.removeChild(toast); } }, 4000); }