Are you ready to transform your website with an eye-catching, interactive element? In this post, we’ll show you how to create a carousel in Elementor that’s not only free but also super easy to set up. Using the powerful Content Carousel widget, you can display images, text, or even entire Elementor templates in a smooth, dynamic slider that brings your content to life. Whether you’re a beginner or a seasoned designer, this step-by-step guide will help you add a modern, engaging twist to your site effortlessly.
Popular Use Cases for using a Carousel in an Elementor Website
Portfolio Showcase
Freelancers and agencies can use a carousel to display their best work in a visually appealing way. Smooth transitions between projects allow potential clients to browse effortlessly and get a quick overview of capabilities.
E-Commerce Product Sliders
An e-commerce product carousel helps display featured, trending, or new arrivals efficiently. It encourages quick browsing, keeping visitors engaged while increasing the chances of product discovery and conversions.
Hero Section Slider
A carousel in the hero section can highlight key messages, promotions, or services with engaging visuals. It creates a strong first impression, guiding visitors to important content while keeping the design dynamic and interactive.
Event Highlights Carousel
For event-based websites, a carousel can showcase upcoming or past events with captivating images and descriptions. This keeps users informed while adding a visually appealing way to navigate through multiple events.
Team Members Showcase
Businesses and agencies can use a carousel to introduce their team members with photos, names, and roles. This interactive display adds a personal touch, making the company feel more approachable and trustworthy.
Client Logos Slider
A rotating carousel of client logos builds credibility and trust. Featuring well-known brands or partners reassures visitors of your expertise and reliability, enhancing your reputation with subtle yet effective social proof.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Content Carousel widget to your Elementor website
To create a carousel in Elementor, install the Content Carousel widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Content Carousel"
Hover over the widget and click install
Step #3: Add Content Carousel widget to your Elementor page
Now, in the Elementor editor, Find the Content Carousel widget and drag it to the desired part of your page.
Choose the Items Source
Choose the Items Source from the dropdown. We can select Posts, Woo products, ACF repeater fields, JSON or CSV files, gallery, terms, users, menu items, and more. For our guide, we’ll use static data and leverage the items repeater to add our content.
General Settings
Layout
Choose a content layout from the following options based on your design:
- Under
- Overlay (PRO)
- Under Overlap (PRO)
- Partial Overlay (PRO)
- Reveal from Bottom (PRO)
- Overlay Bottom (PRO)
Content Width
Set the content width as needed.
Content Spacing
Adjust the content spacing.
Autoplay
Enable or disable autoplay by setting it to either "True" or "False".
Slide Duration
Set the slide duration in milliseconds.
Autoplay Hover Pause
Enable this option to pause autoplay when the user hovers over the carousel.
Number of Items
Specify the number of items to display in the carousel.
Margin Between Items
Adjust the spacing between carousel items.
Loop
Enable looping to make the carousel continuously cycle through items.
Offset Type
Select an offset type:
- None
- Both
- Left
- Right
Center
Enable the "Center" option if you want the active slide to be centered.
Show Dots Each X item
Set the number of navigation dots to appear after every X items.
RTL
Enable the "RTL" (Right-to-Left) option if your layout requires it.
Item Image Size
Choose an appropriate image size for carousel items.
Change Item On Click
Enable this option to change items when clicked.
Transition Speed
Set the transition speed for carousel.
Link Type
Choose the link type: "Regular" or "Lightbox".
Delay Before Load (ms)
Adjust the delay time (in milliseconds) before the carousel loads.
Autoheight
Auto adjust height accordiong to the highest visible slide.
Touch Drag
Enable this option to allow touch-based dragging on touchscreen devices.
Mouse Drag
Enable this option to allow users to drag the carousel using a mouse.
Layout Settings
Show Arrows
Show/hide the arrows on carousel.
Show Dots
Show/Hide the navigation dots.
Show Image
Show or hide the item image.
Image Link
Enable or disable the image link option.
Show Content
Show/hide the item content.
Show Title
Show/hide the item title.
Title HTML Tag
Select the HTML Tag for the title accordingly.
Title Link
Enable or disable the title link option.
Show Intro
Show/hide the item intro.
Show Button
Show/hide the button.
Arrows Settings
Left Arrow
Choose icon for left arrow.
Right Arrow
Choose icon for right arrow.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Carousel Items
Title
Type text for title.
Image
Choose an image to display.
Source
Select the source as either "Content" or "Template".
Content
Enter the text for the content.
Show Button
Enable or disable the button display.
Button Text
Enter the button text if required.
Link
Type or paste the URL to link with carousel item.
Now proceed to add content for the remaining carousel items and style them to match your overall design layout.
Step #4: Add the Remote Arrows widget
Optionally, we can add remote control widgets to make unique layouts, Add the Remote Arrows Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Content Carousel, we can style the remote arrows accordingly to match our website design.
Step #5: Add the Remote Counter widget
Finally, to complete the design, let’s add the Remote Counter Widget to the page, Set it to “Auto Detectable” and it will automatically connect with the Content Carousel, we can also style the remote counter accordingly to match our website design.
Wrapping it Up!
Congratulations on mastering the art of creating a carousel with Elementor! By leveraging the versatile Content Carousel widget, you can now effortlessly incorporate dynamic, customizable elements into your site to capture your audience’s attention. Experiment with different combinations of images, text, and templates to see what best fits your style and content. We hope this guide has made the process clear and enjoyable—happy designing, and don’t forget to share your innovative creations with us!
