Content Slider

Before setting up the Content Slider Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Content Slider Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Content Slider widget displays dynamic content with customizable design and transitions.

Key Use Cases for the Content Slider in Elementor:

• Use the Content Slider widget to showcase dynamic text, images, or promotions in an interactive sliding format.
• Customize the layout, transitions, and design to create an engaging experience without disrupting the page flow.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Content Slider Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Content Slider Widget in the list.
• Toggle it on to enable the widget.

Now, the Content Slider Widget is ready to use!

How to Add the Content Slider Widget in Elementor

• Open the page where you want to add the Content Slider.
• Launch the Elementor editor.
• In the Elementor panel, search for “Content Slider“.
• Drag the Content Slider Widget to your desired section.

The Content Slider Widget will now be available for customization.

How to Configure the Content Slider Widget in Animation Addons

Enable the widget, create a new page, set a title, choose the Elementor Full Width template, and publish it. Adjust options as needed.

• In the Elementor panel, search for the “Content Slider Widget.”
• Drag and drop the widget into your desired section.
• Add your slides and customize each one’s content, layout, and animation using the available settings. 

Content Settings

These options allow you to customize the slider functionality, manage content visibility, and fine-tune the display settings for optimal user engagement.

The settings panel provides two primary configuration options: Content Slider and Slider Option. 

Content Slider

The Content Slider widget offers various configuration options to adjust the layout, content, and media elements for an engaging and responsive presentation. Below is a breakdown of the key settings available in the Content Slider section:

Max Width

• Description: Defines the maximum width of the content slider, allowing you to control the slider’s overall size within its container.
• Use Case: This setting helps maintain consistency across different screen sizes and ensures that the slider does not stretch beyond the desired width.
• Options: You can set the width in pixels or percentage, depending on your design needs.

 Align Items

• Description: Controls the vertical alignment of the content inside each slide.
• Use Case: Aligning items ensures that the content within the slider is positioned properly, whether centered, top-aligned, or bottom-aligned.
• Options: Available alignment options include Top, Center, or Bottom.

Two Category Content Type

• Description: Allows you to categorize the content into two distinct types for improved organization and layout options.
• Use Case: This is especially useful when displaying content that needs to be categorized or separated into two sections, such as an image and text, or different event categories.
• Options: Typically, you can choose between Image & Text or Text & Button.

 Content

• Description: This setting is for adding and managing the textual content within each slide.
• Use Case: You can define the title, description, or any other content you want to display within the slider.
• Options: Content fields allow you to input text and customize it further using typography settings like font size, color, line height, etc.

 Add Media (Visual and Code)

• Description: Allows the addition of media, either through visual elements (images, videos, etc.) or code (like HTML embeds).
• Use Case: Add compelling media to your slides to enrich the visual appeal, or embed content such as custom HTML code for advanced layouts and dynamic elements.
• Options:
  
  • Visual: Upload or select media from your media library.
  • Code: Insert custom HTML code for more flexible, dynamic content.

Paragraph

• Description: Provides the option to add a paragraph of text to each slide.
• Use Case: The paragraph field is ideal for adding descriptions, additional details, or any longer text content related to the event or offer being showcased.
• Options: You can style the paragraph text using standard typography settings, such as font size, color, line height, and alignment.

Slider Option

• I made slight changes to my slider and customized a few things as well. That’s All! 

Slider Option

The Slider Options section provides a wide range of controls to fine-tune the behavior, layout, and user interaction of your Content Slider. Below is a detailed explanation of each setting to help you configure the slider professionally and effectively:

1. Slides to Show (1–10)

• Description: Defines how many slides are visible at once within the slider viewport.
• Use Case: Display multiple items side-by-side or focus on a single highlighted content element.
• Options: Choose from 1 to 10 slides to display simultaneously.

Autoplay Button

• Description: Enables or disables automatic slide transition.
• Use Case: Ideal for hands-free, continuous content presentation such as featured posts or promotions.
• Control: Toggle switch (On/Off).

 Autoplay Delay (if available)

• Description: Sets the time delay (in milliseconds) between automatic slide transitions.
  Use Case: Controls the pacing of autoplay to match your content’s visibility needs.

Allow Touch Move

• Description: Enables swipe gestures for touch devices.
• Use Case: Enhances mobile usability by allowing users to slide content using finger gestures.
• Control: Toggle switch (On/Off).

 Loop

• Description: Allows the slider to loop back to the beginning after the last slide.
• Use Case: Provides a seamless, continuous sliding experience.
• Control: Toggle switch (On/Off).

 Mousewheel Toggle Button

• Description: Enables slide navigation using mouse wheel scrolling.
• Use Case: Improves desktop navigation and adds intuitive interaction.
• Control: Toggle switch (On/Off).

Animation Speed

• Description: Controls the transition speed between slides.
• Use Case: Adjusts the feel of the slider—smooth and slow or quick and snappy.
• Unit: Time in milliseconds (e.g., 300ms, 500ms).

 Space Between

• Description: Sets the gap between individual slides.
• Use Case: Useful for visually separating content blocks and improving layout clarity.
• Unit: Pixels (px).

Navigation

• Description: Displays previous and next navigation arrows for manual slide control.
• Use Case: Allows users to manually scroll through slides.
• Control: Toggle switch (On/Off).

Previous Arrow Icon / Next Arrow Icon

• Description: Customize the icons used for the previous and next navigation arrows.
• Use Case: Match your site’s design language or theme.
• Options: Select from available icon sets.

Pagination Toggle Button

• Description: Enables dot or numeric pagination indicators.
• Use Case: Helps users identify their position within the slider.
• Control: Toggle switch (On/Off).

Pagination Type

• Description: Selects the style of pagination (e.g., dots, fraction, progress bar).
• Use Case: Enhances visual feedback and user orientation.
• Options: Depends on available pagination styles in the widget.

Left/Right Direction

• Description: Determines the sliding direction of the content.
• Use Case: Useful for RTL (Right-to-Left) language support or custom design preference.
• Options: Left or Right.

Center Slide Toggle Button

• Description: Centers the currently active slide within the slider frame.
• Use Case: Enhances focus on the active item for a clean, professional look.
• Control: Toggle switch (On/Off).

Effect

• Description: Sets the slide transition animation effect (e.g., slide, fade).
• Use Case: Adds aesthetic value and improves content engagement.
• Options: Based on available animation types.

Style Settings

The Style section of the Content Slider widget is categorized into three parts: Slide, Slider Navigation, and Slider Pagination. Each section offers detailed styling options to help you align the slider’s design with your website’s aesthetics-

 Slide

Customize the visual appearance of individual slides using the following settings:

• Background Type – Choose between classic, gradient, or image backgrounds to set the visual tone.
• Border Type – Define the border style (solid, dotted, dashed, etc.) around the slide.
• Border Radius – Adjust the roundness of slide corners for a softer or sharper appearance.
• Padding – Control the spacing inside the slide for proper content alignment.

Slider Navigation

Style the previous and next navigation arrows with precision:

• Size – Set the icon size to match your design layout.
• Padding – Add spacing around the navigation buttons for balanced positioning.
• Color – Choose the arrow icon color to match your brand palette.
• Background Type – Customize the background using solid colors, gradients, or images.
• Border Type – Apply a suitable border style to the navigation buttons.
• Border Radius – Round off the edges of the navigation buttons for a modern or classic look.

Slider Pagination

Design the pagination indicators to enhance user navigation:

• Size – Adjust the size of pagination dots or lines.
• Color – Set the default color of the pagination items.
• Active Color – Define a distinct color for the active pagination item to highlight the current slide.
• Border Type – Customize the border around each pagination item.
• Gap – Set spacing between pagination items for clean alignment.
• Pagination Position – Choose where the pagination appears (e.g., top, bottom, inside).
• Pagination Offset – Fine-tune the exact position by setting offset values.

These options provide full control over the design and user experience of your Content Slider, ensuring it integrates seamlessly into your website’s layout and branding.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Content Slider widget in Elementor to create dynamic and engaging content displays on your website.

For any further assistance or inquiries, feel free to contact our support team!