DC Gradient Slider – Free Joomla 5/6 Module

DC Gradient Slider is a free, open-source Joomla 5 and Joomla 6 module that combines a classic fade slider with animated canvas gradients powered by Granim.js.

It was created to solve a simple problem: most Joomla sliders look the same. This module introduces subtle animated backgrounds, smooth fade transitions and a configurable SVG arc to create a modern and distinctive hero section.

✨ Key Features

• 🎞 Slick-based fade slider (smooth UX)

• 🎨 Animated canvas gradient powered by Granim.js

• 🌈 Multiple gradient color sets

• 🖼 Image + heading + description + button support

• 🌙 Configurable SVG arc at the bottom

• ⚙ Full backend configuration (no hardcoded values)

• 🔓 100% open source (GitHub)

• 🚀 Lightweight and performance-oriented

🧠 Technical Architecture

Frontend Layer

• Built on Slick Slider (stable, predictable, production-tested)

• Uses fade mode for smoother transitions

• Gradient initialization synchronized with Slick init event

• Safe multi-instance support per page

Gradient Engine

• Canvas-based gradient rendering via Granim.js

• Overlay architecture (image stays as CSS background)

• Uses mix-blend-mode for modern blending effects

• Supports multiple gradient sets defined in backend

Security

• All backend data escaped in PHP

• Configuration passed via JSON encoding

• No inline user-generated JavaScript

• No hidden trackers or telemetry

• CDN dependencies can be hosted locally

Performance

• Minimal footprint

• Lazy initialization

• No heavy frameworks (no Vue, no React)

• Optional jQuery loading

⚙ Image Handling (Important Note)

Granim.js does not support background-size: cover.

Current image configuration:

opts.image = {
source: imgUrl,
blendingMode: 'overlay',
position: ['center', 'center'],
stretchMode: ['stretch-if-smaller', 'stretch-if-smaller']
};

To avoid image distortion, it is recommended to prepare images in the same aspect ratio as the slider container.

📥 Installation

1. Download the ZIP package.

2. Go to Joomla Administrator → System → Extensions → Install.

3. Upload the module ZIP file.

4. Create a new instance and assign it to a module position.

5. Configure slides and gradients in backend.

🎯 Use Cases

• Hero sections for business websites

• Agency landing pages

• Software house websites

• Modern Joomla-based projects

• Marketing-driven landing pages

🤝 Contributing

Pull requests are welcome.
If you find a bug or want to improve the module, feel free to open an issue or submit a PR.

Project Home Page: DC Gradient Slider - najbardziej wyjątkowy slider dla Joomla 5/6