JO Background Slider allows you to add beautiful, fullscreen background slideshows to any element on your Joomla site. Whether you want a full-page background slider, a hero section slideshow, or a background for a specific container, this module gives you complete control.
Simply target any CSS selector (body, #header, .hero-section) and the module applies a professional slideshow directly as the background. Each slide supports custom titles, HTML content, and positioning - perfect for creating engaging hero sections, banners, or content blocks.
Key Features:
⨠Target Any Element
- Apply slideshow to body (full page), headers, hero sections, or any custom container
- Works with any CSS selector - unlimited possibilities
⨠Per-Slide Customization
- Unique background image for each slide
- Custom title and HTML content per slide
- Individual content positioning (9 positions available)
- Per-slide content background color and opacity
⨠Beautiful Transitions
- 10 transition effects: Fade, Zoom In/Out, Slide, Blur, Burn, and more
- Smooth transition duration control
- "Random" transition option
⨠Ken Burns Effect
- Slow zoom in/out animation on background images
- Creates cinematic, professional look
⨠Navigation Controls
- Previous/Next arrows
- Bullet indicators
- Progress timer bar
- Autoplay with customizable delay
⨠Visual Enhancements
- 9 overlay patterns with opacity control
- Target selectors styling (background, padding, border radius)
- Custom CSS support for advanced styling
⨠Performance Optimized
- Local jQuery loading
- Image preloading option
- Lightweight - uses Vegas.js library
- Responsive design for mobile devices
How it works:
Full-Page Background: The target_element is set to "body" by default, which applies the slideshow to the entire page background.
Container Background: You can target any specific container by using its class name to display the slideshow in the background of that element.
Frontend Demo:
Do you see anything different on this page? đ
Backend Screenshot:
