In this guide, we will show you how to use the “Content Slider widget” on your Elementor website. The Content Slider widget allows you to display multiple pieces of content — such as text, images, videos, or testimonials within an interactive sliding layout, creating an engaging and dynamic experience for your visitors. It’s perfect for showcasing featured content, product highlights, announcements, or promotions in a visually appealing and organized way.
Let’s explore the customization options available in the “Content Slider widget” for Elementor below.
Elementor Free Content Slider Tutorial Video
Add a Free Content Slider to Elementor
Add a Free Content Slider Widget to an Elementor Page
Elementor Content Slider Widget General Settings
Items Source
Choose the source of the data for the testimonial grid.
Posts: Use blog posts as the source.
WooCommerce Products: Use products from a WooCommerce store.
ACF Custom Field: Use data from an Advanced Custom Fields (ACF) custom field.
JSON or CSV: Use data from a JSON or CSV file.
Gallery: Use images and data from a gallery.
Terms: Use taxonomy terms as the source.
Users: Use user data as the source.
Menu: Use items from a menu.
RSS: Use content from an RSS feed.
Instagram: Use data from an Instagram feed.
API Integrations: Use data from various API integrations.
Debug - Show Input Data
A toggle switch to display the raw input data for debugging purposes.
Autoplay
Starts the slider automatically, cycling through slides without user interaction.
Slide Duration
Controls how long each slide stays visible before moving to the next.
Loop
Allows the slider to continuously cycle through slides without stopping.
Autoplay Hover Pause
Pauses the slider animation when the user hovers over it.
Slider Type
Defines the layout or behavior style of the slider (e.g., full-width or boxed).
Animate In
Sets the animation effect when a new slide appears.
Animate Out
Sets the animation effect when a slide disappears.
Ken Burns Effect
Adds or removes the panning and zooming animation effect on images.
Animation Duration (ms)
Adjusts the speed of the transition between slides.
Mouse Drag
Let users navigate between slides by dragging with their mouse.
Touch Drag
Allows users to swipe through slides on touch devices.
Open Image In Lightbox
Opens the slide image in a pop-up lightbox when clicked.
Item Image Size
Defines the image size used for each slide item.
Show Image / Icon
Displays the main media (image or icon) associated with each slide item.
Show Title
Shows the title text for each slide item.
Show Text
Displays the main descriptive content or text of each slide item.
Show Button
Shows the call-to-action button on each slide item.
Button Text
Sets the label or text that appears on the call-to-action button.
Show Dots
Displays small pagination dots indicating the current slide position.
Show Arrows
Displays navigation arrows to manually move between slides.
Animate Content
Applies an animation effect to the slide’s content elements such as the title, text, and button.
Animate Content Duration
Sets how long the content animation takes to complete.
Animate Content Delay
Defines the delay before the content animation starts after the slide transition.
Title
Sets the main heading displayed for the slide item.
Background Image
Adds a specific image as the background for the slide.
Background Position
Defines how the background image is positioned within the slide area (e.g., center, top, bottom).
Content Source
Determines where the main text content comes from, such as a direct content field or an external source.
Content
Displays the main body text or description for the slide item.
Button Text Override
Customizes the call-to-action button text for this specific slide, replacing the global button text.
Link
Assigns a URL or anchor link to the button for navigation or interaction.
Graphic Element
Adds an icon or additional visual element to accompany the slide’s content.
Override Content Position
Allows manual adjustment of the content position for this slide, independent of the global layout settings.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Content Slider Widget Style Settings
Height
Sets the vertical size of the slider relative to the viewport or container.
Vertical Alignment
Aligns the slide content (title, text, button) vertically within the slider.
Horizontal Alignment
Aligns the slide content horizontally within the slider.
Slider Radius
Adjusts the roundness of the slider container’s corners.
Image Fit
Determines how the background image scales within the slide (e.g., cover, contain, fill).
Overlay
Sets the type or style of overlay applied on the slide, such as a solid color, gradient, or pattern.
Overlay Color
Applies a solid color on top of the slide content or background for visual effect or emphasis.
Overlay Image
Adds an image overlay on the slide to enhance the visual design or create texture.
Content Background
Sets a background color or image for the content box within the slide.
Content Max Width
Limits the maximum width of the content container to prevent it from stretching too wide.
Content Border Type
Defines the style of the content box border, such as solid, dashed, or none.
Content Radius
Adjusts the roundness of the content box corners.
Content Shadow
Adds a shadow effect around the content container for depth or emphasis.
Content Alignment
Aligns the text and elements inside the content box (e.g., left, center, right).
Content Padding
Adds inner spacing between the content and the edges of the content box.
Content Margin
Adds outer spacing around the content box relative to the slide or other elements.
Button Align
Sets the horizontal alignment of the button within the content container.
Button Typography
Configures the font style, size, weight, and other typography settings for the button text.
Button Style
Determines how the button width behaves (e.g., auto width, full width).
Button Hover Animation
Adds an animation effect when the user hovers over the button.
Button Padding
Sets the inner spacing of the button (top, bottom, left, right).
Button Radius
Adjusts the roundness of the button corners.
Button Background Color
Sets the button’s background color in its normal state.
Button Background Color Hover
Sets the background color of the button when hovered.
Button Text Color
Sets the color of the button text in its normal state.
Button Text Color Hover
Sets the color of the button text when hovered.
Button Spacing
Adds outer spacing (margin) around the button to separate it from other elements.
Button Border Type
Defines the style of the button border (e.g., solid, dashed, none).
Button Border Hover Type
Defines the style of the button border when hovered.
Nav Arrow Spacing (Horizontal)
Sets the horizontal distance of the navigation arrows from the slider’s side edges.
Nav Arrow Position (Vertical Spacing)
Adjusts the vertical position of the navigation arrows within the slider.
Nav Arrow Radius
Controls the roundness of the arrow container’s background.
Nav Arrow Background Size
Sets the size of the arrow container that holds the icon.
Nav Arrow Icon Size
Defines the size of the arrow icon itself.
Nav Arrow Background
Sets the background color of the arrow container.
Nav Arrow Background Hover
Sets the background color of the arrow container when hovered.
Nav Arrow Icon Color
Sets the color of the arrow icon.
Nav Arrow Icon Color Hover
Sets the color of the arrow icon when hovered.
Nav Dots Size
Sets the width and height of the navigation dots.
Dot Color
Defines the color of non-active (inactive) navigation dots.
Dot Active Color
Sets the color of the currently active navigation dot.
Dot Spacing
Adjusts the distance between the row of dots and nearby vertical elements or the slider edge.
Dot Space Between
Controls the spacing between each individual navigation dot.
Dot Alignment
Sets the horizontal alignment of the row of navigation dots within the slider.
Icon Size Outer
Sets the size of the icon’s background container or wrapper.
Icon Size
Defines the size of the icon symbol inside the container.
Icon Color
Sets the color of the icon symbol.
Icon Background
Applies a background color to the icon’s container.
Icon Radius
Adjusts the roundness of the icon’s container corners.
Icon Shadow
Adds a shadow effect to the icon container.
Icon Border Type
Defines the border style of the icon container.
Icon Spacing (Margin Top)
Adds top margin above the icon container.
Content Slider Widget Design Examples For Elementor
Here are some live use cases for the Content Slider widget.
Content Carousel with Remote.
Remote Tabs with Vehicle.
Thank you for using the Content Slider widget for Elementor! This powerful and versatile tool allows you to display text, images, videos, or any type of content in a sleek, animated slider format, bringing motion and interactivity to your website. Perfect for showcasing featured posts, promotions, testimonials, or portfolio items, it helps you present information in an engaging and visually appealing way. Designed with flexibility and responsiveness in mind, it offers full customization options to seamlessly match your website’s style and layout. For support or inspiration, please don’t hesitate to get in touch or explore our demo.