RSK World - Image Slider with Thumbnails | Unlimited Picsum Images | Autoplay, Fullscreen, Lightbox | RSK World

Image Slider with Thumbnails - RSK World

Slider & Thumbnails Picsum & Sources Autoplay & Transitions Lightbox & Fullscreen Vanilla JS

Image Slider with Thumbnails is a free image carousel that loads unlimited images from Lorem Picsum (no API key). Features: thumbnail strip, numbered indicators, prev/next arrows, autoplay with configurable speed and progress bar, fullscreen, lightbox, search by number or keyword, shuffle, minimap, parallax, download. Transitions: slide, fade, zoom, cube, flip. Keyboard: arrows, Space, F fullscreen, L lightbox, S settings, ? shortcuts. Touch swipe. CSS: style.css. JS: script-unlimited.js (dynamic load), script.js and script-advanced.js for static/advanced variants. By rskworld.in.

If you find this Image Slider with Thumbnails project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Image Slider with Thumbnails

Slider & Thumbnails

Main slider with one active slide and horizontal thumbnail strip. Numbered indicators, prev/next arrows, slide counter (1 / N). Thumbnails scroll into view on change. UnlimitedImageSlider class in script-unlimited.js builds slides from Lorem Picsum (fixed ID or random seed). No API key required.

Horizontal thumbnail strip with active-state border and smooth scroll-into-view so the current slide thumbnail stays visible and centered for easy image slider navigation.
Numbered dot indicators, prev/next arrow buttons, slide counter (e.g. 1 / 20), and autoplay progress bar for quick carousel control and visual feedback.
Lorem Picsum integration: fixed IDs via picsum.photos/id/{id}/1200/600 or random seeds via picsum.photos/seed/{seed}/1200/600 — no API key required for unlimited free images.
Configurable image count (5–100) with Load Images button; Add 10 More appends images without clearing the existing slider for unlimited image gallery expansion.

Project Structure & Files

Root: index.html (slider UI, source selector, search, settings, shortcuts). CSS: style.css. JS: script-unlimited.js (active – dynamic Picsum load), script.js (static slides), script-advanced.js (lazy load, Ken Burns). No build step. Open index.html or serve folder.

Clean file set: index.html (slider UI, source selector, search, settings), style.css (dark theme, gradients, responsive), script-unlimited.js (active), script.js and script-advanced.js for static and advanced variants.
Zero build step — open index.html directly in a browser or serve the folder with any static server for instant image slider demo and development.
Lorem Picsum (picsum.photos) used for free, unlimited placeholder images — ideal for carousel demos, prototypes, and SEO-friendly image content without API keys.
No frameworks or npm: pure vanilla HTML5, CSS3, and JavaScript for fast load, full control, and easy customization of the image slider with thumbnails.

Transitions & Settings

Settings panel: transition effect (slide, fade, zoom, cube, flip), autoplay speed 2–10 seconds. CSS classes effect-slide, effect-fade, effect-zoom, effect-cube, effect-flip. Autoplay with progress bar animation; pause on hover; visibility API pauses when tab hidden.

Five transition effects in Settings: slide, fade, zoom, cube, and flip — CSS-driven for smooth image carousel transitions and better user experience.
Autoplay speed control via range slider (2–10 seconds) with live label (e.g. 5s) so you can tune slideshow timing for presentations or galleries.
Animated progress bar at the bottom of the slider stays in sync with autoplay interval for clear visual feedback on when the next slide will appear.
Smart pause behaviour: autoplay pauses on mouse hover over the slider and when the browser tab is hidden (Page Visibility API) to save resources and improve UX.

Search, Shuffle & Extended

Search by number (e.g. 5) or keyword (picsum, photo); highlights matching thumbnails. Shuffle reorders images and rebuilds slides. Extended: Info (current slide alert), Stats (count/source/autoplay), Download, Minimap (dot strip), Parallax (mouse-move effect). Notifications for search and download.

Search by slide number (e.g. 5) or keyword (picsum, photo, image) — jumps to first matching slide and highlights matching thumbnails with a red border for quick discovery.
Extended controls: Shuffle (randomize order), Info (current slide details), Stats (total count, source, autoplay), Download (current image), Minimap (dot strip), Parallax (mouse-move effect) for a rich image gallery experience.
Non-intrusive toast notifications at bottom-center for search results (e.g. "Found 3 image(s) matching…") and download started — improves feedback without blocking the UI.
Clear search button resets the search input and removes highlight borders from thumbnails so the slider returns to normal navigation state.

Controls & Shortcuts

Controls: Settings, Shortcuts, Add 10 More. Slider: autoplay toggle, fullscreen, lightbox, download icon. Keyboard: ← → prev/next, Space autoplay, F fullscreen, L lightbox, S settings, ? shortcuts, Esc close modals. Touch swipe left/right (50px threshold). Input-safe: shortcuts disabled when typing in search.

Full keyboard support: Arrow Left/Right for prev/next slide, Space to toggle autoplay, F for fullscreen, L for lightbox, S for settings, ? for shortcuts list, Escape to close modals — ideal for accessibility and power users.
Touch-friendly swipe gestures (left/right with 50px threshold) and automatic autoplay pause on hover so mobile and desktop users get a smooth image slider experience.
Shortcuts modal (?) displays every keyboard shortcut in one place for discoverability and SEO-friendly help content about the image carousel controls.
Native Fullscreen API on the slider wrapper — enter/exit fullscreen for distraction-free viewing of the image gallery without leaving the page.

What You Get

Static HTML/CSS/JS: index.html, style.css, script-unlimited.js, script.js, script-advanced.js, LICENSE. No build step. Open index.html or serve folder. Image sources: Lorem Picsum (fixed ID or random). SEO-friendly meta and content via var.php when used with index.php.

Complete downloadable source: index.html, style.css, script-unlimited.js, script.js, script-advanced.js, and LICENSE — everything needed to run and customize the image slider with thumbnails project.
No build tools or npm install — open index.html in a browser or serve the folder with PHP, Node, or any static server for immediate use and easy deployment.
MIT License with clear attribution to RSK World and Lorem Picsum for demo images — free for personal and commercial use with proper credits.
Built with standard web tech: HTML5, CSS3, and Vanilla JavaScript only — no React, Vue, or jQuery; lightweight and SEO-friendly. © 2026 RSK World.

Usage

Open index.html. Choose image source (Picsum fixed/random), set count (5–100), click Load Images. Use arrows or thumbnails to navigate; toggle autoplay, fullscreen, lightbox. Search by number or keyword; Shuffle, Download, Minimap, Parallax from extended controls. See keyboard shortcuts (?) for full list.

index.html is the single entry point: main image slider area, thumbnail strip, source selector (Picsum fixed/random), search box, settings and shortcuts panels — all in one page for simple setup.
style.css provides a dark gradient theme, responsive breakpoints for mobile, and styles for fullscreen, lightbox, minimap, and parallax — one file for the entire image carousel UI.
script-unlimited.js defines the UnlimitedImageSlider class: loadImages(), generateImageUrls(), createSlide(), createThumbnails(), search, shuffle, download, and all event bindings for the slider.
Project by RSK World (rskworld.in) — free image slider with thumbnails for learning front-end development, prototyping, and building image galleries without frameworks.

Project Features

Unlimited images from Lorem Picsum; thumbnail navigation; autoplay with progress; fullscreen and lightbox; search and shuffle; minimap and parallax; multiple transitions; keyboard and touch; download; settings and shortcuts. All vanilla JS, no frameworks. No API key needed.

Core image slider features: thumbnail strip with active state, numbered indicators, prev/next arrows, autoplay with progress bar, fullscreen mode, and lightbox overlay for large image viewing — all in vanilla JavaScript.
Extended features: search by number or keyword, shuffle order, download current image, minimap dot navigation, and parallax mouse-follow effect for an engaging image gallery experience.
Five transition effects (slide, fade, zoom, cube, flip) configurable from the settings panel — great for presentations, portfolios, and SEO-rich image carousel content.
Fully responsive layout and touch swipe support — the image slider with thumbnails works on desktop, tablet, and mobile with no extra libraries; fast and accessible.

Credits & Acknowledgments

Image Slider with Thumbnails by RSK World. Free image carousel with unlimited Picsum images, thumbnails, autoplay, fullscreen, lightbox, search, shuffle. For learning front-end and vanilla JS.

Image Slider with Thumbnails is a free, open-source image carousel project featuring unlimited Lorem Picsum images, thumbnail navigation, autoplay, fullscreen, lightbox, search, shuffle, and keyboard shortcuts — built for learning and reuse.
RSK World – Project creator and educational platform; offers UI/UX projects, tutorials, and front-end resources at rskworld.in.
Author: Molla Samser (Founder - RSK World). Contact: Website https://rskworld.in, Email help@rskworld.in, Phone +91 93305 39277 for support and customization of the image slider project.
Third-party credits and attributions for assets and services used in this project and its landing page:
Lorem Picsum – Free, unlimited placeholder images via picsum.photos API; no API key required for the image slider demo.
Bootstrap – CSS and JavaScript framework (getbootstrap.com) used for layout and components on the project landing page.
Prism.js – Lightweight syntax highlighter (prismjs.com) for code display in the file browser and documentation.
Razorpay – Payment gateway (razorpay.com) for optional support/donation integration on the project page.
QR Server API – UPI QR code generation (api.qrserver.com / goqr.me) for easy payment and sharing.
© 2026 RSK World. All rights reserved. Image Slider with Thumbnails is provided under MIT License with attribution to RSK World and Picsum for images.

Support & Contact

For Image Slider with Thumbnails customization or integration help, please contact us.

Email: help@rskworld.in — for questions about the Image Slider with Thumbnails project, customization, integration, or bulk licensing.
Phone: +91 93305 39277 — direct contact for RSK World; support for image slider, carousel, and UI/UX project inquiries.
Website: RSKWORLD.in — portfolio, more free projects, and resources for front-end developers and designers.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India — RSK World base; remote support available worldwide for the image slider project.
Author: Molla Samser (Founder, RSK World) — creator of the Image Slider with Thumbnails and other vanilla JS UI components.
Image Slider with Thumbnails README and documentation — usage, keyboard shortcuts, and feature list for SEO and user guidance.
Technical support available for setup, deployment, and customization of the image carousel and thumbnail slider on your site.
UI component and feature requests welcome — suggest new slider options, transitions, or integrations via RSK World contact channels.