JD Slider

JD Slider (mod_jdslider) displays your Joom Donation campaigns as a modern, responsive multi-item carousel. Unlike a full-screen slideshow, the slider shows several campaign cards at once and allows visitors to drag, swipe or click navigation arrows/dots to scroll through them. The module is built with pure vanilla JavaScript — no jQuery required — and is fully 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 display only its child campaigns. Leave empty to ignore.
Campaign IDs Comma-separated IDs of specific campaigns to show (e.g. 1,3,5). Leave empty to show all published campaigns the current visitor may access.
Only Open Campaigns When set to Yes, only campaigns that are still accepting donations (no past end date) will appear in the slider.
Campaign Limit Maximum number of campaigns to load. Set to 0 for no limit.
Sort Order Order in which campaigns appear:
  • Newest First (default)
  • Oldest First
  • Title A → Z
  • Title Z → A
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.

Display Options

ParameterDescription
Show Campaign Title Display the title of each campaign on its card.
Show Summary Display a short text excerpt of the campaign description.
Summary Length (characters) Maximum number of characters shown for the campaign summary. Set to 0 to show the full description. Default is 120.
Show Goal Display the fundraising goal amount on each card.
Show Donated Amount Display the total amount donated so far on each card.
Show Percent Donated Display the donation progress as a percentage and a visual progress bar.
Show Social Sharing Display Facebook, Twitter/X and LinkedIn share buttons on each card.
Show Donate Button Display the Donate Now call-to-action button on each card.

Slider Settings

ParameterDescription
Items Visible (Desktop) Number of campaign cards visible at once on screens wider than 1024 px. Default is 3.
Items Visible (Tablet) Number of campaign cards visible at once on screens between 641 px and 1024 px. Default is 2.
Items Visible (Mobile) Number of campaign cards visible at once on screens 640 px wide or narrower. Default is 1.
Gap Between Cards (px) Space in pixels between adjacent campaign cards. Default is 20.
Image Aspect Ratio Aspect ratio of the campaign image on each card. Available options: 16:9 (default), 4:3, 1:1, 3:2, 21:9.
Show Navigation Arrows Display previous/next arrow buttons on either side of the slider.
Show Page Navigation Dots Display clickable dot indicators below the slider.
Autoplay Automatically advance to the next group of cards at the configured interval.
Autoplay Interval (ms) Time in milliseconds between automatic slide advances. Default is 4000 (4 seconds).
Loop (Infinite Scroll) When enabled, the slider wraps around from the last card back to the first seamlessly.
Enable Drag / Swipe Allow visitors to drag with the mouse or swipe with a finger to scroll through cards.

Tips

  • Use the Only Open Campaigns option to automatically hide campaigns that have already reached their end date.
  • Set Items Visible (Desktop) to 1 if you want the slider to behave like a single-item full-width carousel.
  • For best visual results, ensure all campaign images share the same aspect ratio and match the Image Aspect Ratio you choose in the settings.
  • The Gap Between Cards value is applied uniformly between cards. Increase it for a more spacious layout or set it to 0 for a tight, edge-to-edge look.