Description: This tool allows you to create, customize, and manage dynamic carousels (sliders) composed of multiple visual elements, ideal for showcasing featured content on the website.
What is it for? (Practical examples)
Use the Carousel module to:
- Create a welcome area on the homepage that automatically rotates through different promotions or key messages.
- Present a gallery of images or videos with unique background effects and overlaid texts.
- Organize complex content into a controlled visual sequence, such as a guided presentation or a portfolio.
Main features
The module offers granular control over both the general carousel settings and the customization of each individual slide.
- Centralized management: Quick view of all created carousels, with immediate indication if they are active or hidden on the site.
- Slide structure: The carousel is composed of separate tabs, each representing a single slide.
- Advanced visual editor: Each slide includes an area for inserting text, images, and other complex graphic elements, managed through a dedicated visual editor.
- Multimedia backgrounds: Support for using background images (with separate options for desktop and mobile) or videos (from external platforms like YouTube/Vimeo or MP4 files).
- Overlay effects: Ability to apply colors, gradients, and opacity levels over the background to improve content readability.
How to configure
The configuration is divided into two areas: the general carousel settings and the specific settings for each slide.
1. General carousel settings
These options define the overall behavior and appearance of the carousel.
| Option | Description |
|---|---|
| Slider title | Internal name to identify the carousel in the management area. |
| Visible on site | Activation/deactivation status of the carousel. |
| Slider height | Defines the overall height of the carousel, specifying a numeric value and unit of measurement (pixels, vh, vw). |
| Autoplay | Time in seconds after which the slide automatically moves to the next one. |
| Loop | If enabled, the carousel restarts from the beginning once the last slide is reached. |
| Arrows | Displays navigation buttons for manual slide scrolling. |
| Random order | Slides are shown in a different order each time the page loads. |
2. Settings for each individual slide
Each slide (managed through a tab) can be customized individually.
Content and Title
- Slide Title: Internal name of the slide (useful for organization).
- Content: Main area to insert the text and visual elements of the slide using the editor.
Background (Images)
This section manages the visual appearance of the background through images.
| Option | Description |
|---|---|
| Desktop/Mobile Image | Allows uploading specific images for display on large and small screens. |
| Size | Defines how the image fits the area (e.g., cover to fully cover the space). |
| Repeat | Determines if the image should be repeated horizontally, vertically, or not at all. |
| Position | Alignment of the background image (e.g., center, top left, etc.). |
| Attachment | Defines whether the image scrolls with the page or remains fixed (fixed). |
Background (Video)
Allows using a video as background.
| Option | Description |
|---|---|
| Background Video | Enter the video URL (supports direct links to MP4 files or links from platforms like Vimeo/YouTube). |
| On video completion | Defines what happens when the video ends (continue looping, hide, freeze on the last frame). |
| Display on | Allows hiding the video on specific devices (Desktop, Tablet, Mobile). |
Overlay
These options apply a colored or gradient filter over the background.
| Option | Description |
|---|---|
| Gradient | Applies a color gradient over the background. |
| Color | Applies a uniform color over the background. |
| Opacity | Defines the transparency of the applied gradient/color (from 0 to 100%). |
Automatic integrations
Once saved, carousels are immediately available to be inserted into any page of your site. The system automatically manages:
- Multilingual display: If your system supports multiple languages, the textual content of the slides is managed and saved for each configured language.
- Adaptability: Background settings (desktop/mobile images) and video visibility ensure the carousel adapts correctly to all device types.
