Random Image Script: Modern Alternatives

Swiper

Modern mobile touch slider with hardware accelerated transitions. Framework agnostic with support for React, Vue, and Angular. Includes lazy loading, virtual slides, and parallax effects.

Splide

Lightweight, flexible slider with no dependencies. Written in TypeScript with full type support. Features multiple slides, thumbnails, and video integration.

Glide.js

Dependency-free ES6 slider with modular architecture. Small footprint with keyboard navigation and responsive breakpoints. Supports autoplay and multiple transition effects.

Flickity

Touch-enabled, responsive carousel with physics-based animation. Includes accessible controls, auto-play, and lazy loading. Works great for gallery and product images.

Unsplash API

Beautiful, free images from professional photographers. High-quality photos with random endpoint, search by topic, and curated collections. Perfect for hero images and backgrounds.

https://source.unsplash.com/random/800x600
https://source.unsplash.com/random/800x600?nature

Lorem Picsum

Easy placeholder images for development and testing. Simple URL-based API with no authentication required. Specify dimensions, blur, and grayscale effects directly in the URL.

<img src="https://picsum.photos/400/300?random=1">
<img src="https://picsum.photos/400/300?blur=2">

Pexels API

Free stock photos and videos API. Extensive library with search, curated collections, and trending content. Includes attribution data and multiple image sizes.

Placekitten

Placeholder images featuring adorable kittens. Simple URL-based service perfect for development and testing. Brings joy to your mockups.

<img src="https://placekitten.com/400/300">

const images = [
  '/images/banner1.jpg',
  '/images/banner2.jpg',
  '/images/banner3.jpg',
  '/images/banner4.jpg'
];

const randomIndex = Math.floor(Math.random() * images.length);
document.getElementById('banner').src = images[randomIndex];

// Or with CSS background:
document.body.style.backgroundImage = `url('${images[randomIndex]}')`;

// Preload images for smooth experience:
images.forEach(src => {
  const img = new Image();
  img.src = src;
});

<?php
$imageDir = 'images/banners/';
$images = glob($imageDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
$randomImage = $images[array_rand($images)];
?>
<img src="<?php echo htmlspecialchars($randomImage); ?>" alt="Random banner">