Responsive Content Slider

Introduction

Responsive Content Slider is a powerful and flexible Joomla module that displays Joomla articles in an elegant tabbed slider interface. Perfect for showcasing multiple articles, blog posts, news items, or any content in an interactive slider format, this module offers extensive customization options and smooth animations to match your website's design.

Fully compatible with Joomla 4, 5, and 6, the Responsive Content Slider seamlessly integrates with Joomla's content management system, allowing you to display articles from selected categories with customizable styling, auto-slide functionality, and responsive design that works on all devices.

This documentation covers the installation, configuration, and usage of the Responsive Content Slider module.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the Downloads section of our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: ResponsiveContentSlider_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the ResponsiveContentSlider_UNZIP.zip package. After unzipping, you will find the following contents:

• Folder Joomla 4, 5 & 6: This extension is compatible with Joomla 4.x, 5.x, and 6.x. In this folder, you will find the installation file named mod_responsive_slider_X.x.zip.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

After successful installation:

• Go to Content > Site Modules
• You will find Responsive Content Slider listed. Click on it to configure.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

Configuration

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Content > Site Modules, and find Responsive Content Slider in the list.

General Settings

• Select Categories: Choose one or more categories from which articles will be displayed. Leave empty to show articles from all categories.
• Article Ordering: Select how articles should be ordered (Published Date, Created Date, Modified Date, Hits, Ordering, or Random).
• Sort Direction: Choose ascending (oldest first) or descending (newest first) order. This option appears when ordering is set to Published Date, Created Date, Modified Date, Hits, or Ordering.
• Number of Articles: Enter the maximum number of articles to display (1-50). Default is 3.
• Slider Width: Set the width of the slider in pixels (200-2000). Enter only the number (e.g., 500 for 500px). Default is 500px.
• Enable Auto Slide: Automatically advance slides at the interval specified below. When disabled, users must manually navigate between slides.
• Show Navigation Arrows: Display navigation arrows (previous/next) on the slider. Arrows appear on hover when enabled.
• Auto Slide Interval: Set the time in milliseconds between automatic slide transitions. 1000 milliseconds = 1 second. Default is 5000ms (5 seconds). Range: 1000-30000ms.

Styling Settings

• Tab Background Color: Set the background color for inactive slider tabs. This is the default state before users interact with the tabs.
• Tab Active/Hover Color: Set the background color for the active tab or when hovering over tabs. This helps users identify the currently displayed slide.
• Tab Text Color: Set the text color for inactive tabs. Choose a color that contrasts well with the tab background color for readability.
• Active Tab Text Color: Set the text color for the active tab. This color is applied when a tab is selected or hovered.
• Content Area Background: Set the background color for the main content area where article text is displayed. This is the panel behind the article content.
• Content Text Color: Set the text color for the article content displayed in the slider. Ensure good contrast with the content area background.
• Tab Font Size: Enter the font size for tab text. Include the unit (e.g., 14px, 1em, 16pt). Default is 14px.
• Tab Font Weight: Choose Normal or Bold for tab text. Bold makes tabs more prominent, while Normal provides a lighter appearance.
• Content Padding: Set the padding (spacing) inside the content area around the article text. Include the unit (e.g., 10px, 1em). Default is 10px.

Advanced Settings

• Module Class Suffix: Add a custom CSS class suffix to the module wrapper. This allows you to apply custom styling to this specific module instance. Leave empty for default styling.
• Mobile Navigation Text: Enter the text displayed in the mobile navigation dropdown menu. This appears on smaller screens where tabs are replaced with a dropdown selector. Default is 'Menu'.

Usage

• Content Management: The module automatically pulls content from Joomla articles based on the categories and settings you have configured. No additional content setup is required beyond creating articles in your selected categories.
• Testing: Preview the frontend of your website to ensure the slider appears and functions as expected. Test on different devices to verify responsive behavior.

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Responsive Content Slider will display articles in a tabbed slider format based on your settings, providing a dynamic and engaging content area.

Key Features

• Unlimited Tabs: Create an unlimited number of tabs, each displaying different Joomla articles from selected categories.
• Joomla Article Integration: Seamlessly integrate with Joomla's content management system. Display articles from any category with dynamic content fetching.
• Smooth Sliding Transitions: Visually engaging sliding effects between tabs powered by jQuery easing for professional animations.
• Auto Slide Functionality: Automatically advance slides at configurable intervals with pause on hover capability.
• Navigation Controls: Multiple navigation options including navigation arrows, tab navigation, keyboard support, and mobile dropdown menu.
• Flexible Article Ordering: Control how articles appear with options for Published Date, Created Date, Modified Date, Hits, Ordering, or Random, with ascending or descending sort order.
• Customizable Styling: Complete design flexibility with tab colors, text colors, content area colors, font settings, padding control, and slider width configuration.
• Responsive Design: Fully responsive and mobile-friendly with touch support via jQuery TouchSwipe, mobile navigation dropdown, and consistent experience across all devices.
• Cross-Browser Compatibility: Works on Firefox, Chrome, Edge, Safari, and Opera with consistent performance.
• Modern Joomla Compatibility: Fully compatible with Joomla 4, 5, and 6 with modern PHP 8.0+ support and WebAssetManager integration.
• Local Asset Management: All JavaScript libraries (jQuery Easing, TouchSwipe) included locally for better performance and offline support.
• Enhanced Security: Built with security best practices including input sanitization, XSS prevention, and access control.

FAQ

• How do I select which articles appear in the slider?

  • Use the Select Categories field under General Settings to choose one or more categories. The module will display articles from those categories based on your ordering and count settings.

• Can I change the order of articles in the slider?

  • Yes, use the Article Ordering setting to choose how articles are sorted (Published Date, Created Date, Modified Date, Hits, Ordering, or Random). You can also set the Sort Direction to ascending or descending.

• How do I enable automatic sliding?

  • Set Enable Auto Slide to Yes under General Settings. Then set the Auto Slide Interval to specify how long to wait between slides (in milliseconds).

• Can I customize the colors of the tabs and content area?

  • Yes, under Styling Settings, you can customize tab background colors, tab text colors, content area background, and content text colors to match your website's design.

• How do I change the slider width?

  • Set the Slider Width under General Settings. Enter the width in pixels (e.g., 500 for 500px). The range is 200-2000 pixels.

• Can I show navigation arrows on the slider?

  • Yes, set Show Navigation Arrows to Yes under General Settings. The arrows will appear on hover when enabled.

• How many articles can I display in the slider?

  • You can display 1 to 50 articles. Set the Number of Articles field under General Settings. The default is 3 articles.

• Does the slider work on mobile devices?

  • Yes, the slider is fully responsive and mobile-friendly. On smaller screens, tabs are replaced with a dropdown menu. You can customize the dropdown text using the Mobile Navigation Text setting.

• Can I use keyboard navigation to control the slider?

  • Yes, keyboard navigation is enabled by default. Users can use keyboard arrows to navigate between slides.

• How do I add custom CSS to the slider?

  • Use the Module Class Suffix field under Advanced Settings to add a custom CSS class. Then add your custom CSS to your template's CSS file targeting that class. The module uses the jx- prefix for all CSS classes.

Troubleshooting

• Slider Not Displaying: Ensure the module is assigned to a visible template position and published. Verify that you have articles in the selected categories. Check browser console for JavaScript errors.
• No Articles Showing: Verify that you have selected categories with published articles. Check the Number of Articles setting and ensure articles match your ordering criteria. Verify article access levels.
• Styling Issues: Check the Styling Settings and adjust colors, font sizes, and padding as needed. Clear browser cache and Joomla cache after making changes. Verify that color values are in correct format (hex codes like #000000).
• Auto Slide Not Working: Ensure Enable Auto Slide is set to Yes in General Settings. Check the Auto Slide Interval value (should be between 1000-30000 milliseconds). Verify that JavaScript is enabled in the browser.
• Navigation Arrows Not Visible: Ensure Show Navigation Arrows is set to Yes. The arrows appear on hover, so try hovering over the slider area. Check browser console for JavaScript errors.
• Slider Width Issues: Verify the Slider Width is set correctly (200-2000 pixels). Enter only the number without 'px'. Check if your template CSS is overriding the slider width.
• Mobile Navigation Not Working: Test on an actual mobile device or use browser developer tools to simulate mobile view. Verify that the Mobile Navigation Text is set correctly. Check for JavaScript errors in mobile browser console.
• Module Not Visible on Page: If you are using Firefox or Google Chrome, right-click on your website and click on "View Page Source". In the source code, search for text like "responsive-slider" or "jx-slider". If you don't find the text, then it's confirmed that the module isn't activated on the page. Check module assignment and menu item selection.
• Changes Not Reflecting: If Joomla cache is activated, try to clear it once after you make changes to the module parameter settings. Go to System > Clear Cache. Also clear your browser cache.
• JavaScript Errors: Check browser console (F12) for JavaScript errors. Ensure jQuery is loaded properly. Verify that all asset files are accessible (check file permissions).
• Adding Module Inside Article: To add this module inside an article, go through the URL: https://docs.joomla.org/How_do_you_put_a_module_inside_an_article?