JD Campaigns Slideshow

JD Campaigns Slideshow (mod_jdslideshow) displays your Joom Donation campaigns as a full-width, responsive slideshow. Each slide shows the campaign image, title, description, fundraising progress and a Donate Now button. The module uses pure vanilla JavaScript — no jQuery or third-party libraries required — and is compatible with Joomla 4, 5 and 6.

Installation

Install the module through Extensions → Manage → Install, then enable and configure it under Extensions → Modules.

Parameters

Basic / Campaign Selection

ParameterDescription
Module Class Suffix A CSS class suffix applied to the module wrapper. Use this to apply custom styling.
Category Filter campaigns by category. Leave at 0 (All) to display campaigns from every category.
Parent Campaign ID Enter the ID of a parent campaign to show only its child campaigns. Leave empty to ignore.
Campaign IDs Comma-separated list of campaign IDs to display (e.g. 1,3,5). Leave empty to show all published campaigns.
Show Campaign Title Display the title of each campaign on its slide.
Show Description Display a short excerpt of the campaign description on the slide.
Show Goal Display the fundraising goal amount.
Show Donated Amount Display the total amount donated so far.
Show Percent Donated Display the donation progress as a percentage together with a visual progress bar.
Show Days Left Display the number of days remaining before the campaign ends.
Show Donate Button Display the Donate Now call-to-action button on each slide.
Menu Item ID ID of the menu item to redirect to when a visitor clicks the Donate button. Leave empty to use the system default.

Slideshow Settings

ParameterDescription
Autoplay Automatically advance slides at the configured interval. Set to No to require manual navigation.
Autoplay Interval (ms) Time in milliseconds between automatic slide changes. Default is 5000 (5 seconds).
Transition Effect Animation used when switching between slides:
  • Fade — slides cross-fade (default).
  • Slide — slides move horizontally.
Show Navigation Arrows Display previous/next arrow buttons on the left and right edges of the slideshow.
Show Dot Indicators Display clickable dot indicators below the slideshow so visitors can jump to any slide directly.

Keyboard & Touch Navigation

Even without configuring anything extra, the slideshow supports:

  • Arrow keys — press ← / → to navigate while the slideshow is in focus.
  • Touch/swipe — swipe left or right on touch devices to change slides.
  • Hover pause — autoplay pauses automatically when the cursor is over the slideshow.

Tips

  • For best visual results use campaign images with a consistent aspect ratio (e.g. 16:9).
  • If you want to feature a hand-picked set of campaigns, enter their IDs in the Campaign IDs field rather than relying on a category filter.
  • Set Autoplay to No and keep Navigation Arrows and Dot Indicators enabled to give visitors full manual control.