How to create sliders in Elementor
Elementor can create sliders without a separate slider plugin. Use Slides for a hero banner with text and buttons, Image Carousel for pictures, or Carousel for custom content layouts. Set the height, navigation, autoplay, and mobile settings, then test every slide before publishing.
- 01Choose the right slider widget
- 02Add the slider to your page
- 03Set the slider behaviour
- 04Style the slider container
- 05Check responsive views
- 06Use a dedicated slider plugin when needed
What you need
- An Elementor-built page or template
- Admin or editor access to WordPress
- Optimised images with consistent dimensions
- Elementor Pro if the Slides widget is not available in your editor
Choose the right slider widget
Open the page with Elementor and search the widget panel for the layout you need. Use Slides for a hero slider with a background image, heading, description, and button. Use Image Carousel for a row of images. Use Carousel when each slide needs its own Elementor container with widgets such as text, buttons, or icons. Elementor’s Slides widget is documented as a Pro widget, while the available widgets depend on the Elementor setup active on your site.
Do not place a carousel inside another carousel. Nested sliders can interfere with sizing and movement, particularly on smaller screens.
Add the slider to your page
Drag the chosen widget into a container. For a Slides widget, open the Content tab and use the Slides list to add, duplicate, delete, or reorder slides. Open each slide to set its background image, title, description, button text, and link.
For Image Carousel, select the images from the Media Library, create a gallery, and insert it. Set the image resolution, number of slides to show, number to scroll, and whether the images should link to media files or custom URLs.
Set the slider behaviour
Choose whether the slides use a Slide or Fade transition, then set the transition or autoplay speed. Decide whether autoplay should pause when someone hovers over the slider or interacts with it. Keep autoplay slow enough for visitors to read the content.
Turn on arrows, pagination dots, or both. For a Carousel widget, set the number of slides on display and the number that move per click or swipe. Showing too many slides makes each item smaller, so reduce the number on tablet and mobile.
Style the slider container
Use the Style tab to set the slide height, content width, alignment, padding, typography, button appearance, arrow position, and pagination colours. For a full-width hero, edit the parent container and set its content width to full width, then remove unwanted gaps or padding. Elementor’s full-width tutorial uses these container settings alongside a viewport-based slide height.
Use a consistent image ratio across slides. If one image is much taller or wider than the others, the background crop can shift between slides and make the content appear to jump.
Check responsive views
Switch Elementor’s responsive previews for desktop, tablet, and mobile. Set a separate height, padding, content width, and number of visible slides where necessary. A hero height that looks good on desktop can leave too little room for a heading and button on a phone.
Preview the published page outside the editor as well. Check that text remains readable over each image, buttons are reachable, arrows are not cut off, and each link opens the intended page. If the slider is inside a hidden tab, popup, or other initially concealed element, check it after that element becomes visible because carousels can calculate their width incorrectly while hidden.
Use a dedicated slider plugin when needed
The built-in widgets are enough for a simple hero, image strip, or content carousel. Choose a dedicated Elementor slider plugin when you need more ready-made layouts, richer animation controls, video backgrounds, or reusable showcase sections without assembling every slide manually.
Prime Slider Pro fits that use case with responsive slider layouts, carousel and full-width styles, animation effects, navigation controls, Elementor integration, and support for video or other media. Install it from the WordPress dashboard, activate it, then add its slider widget or template in Elementor and configure the slides there.
Let Prime Slider Pro do it
Responsive slider layouts with animations, media, and hero sections for Elementor sites needing visual content showcases.
Sources
- elementor.com /help/slides-widget-pro/?utm_source=openai
- elementor.com /help/carousel-widget/?utm_source=openai
- elementor.com /academy/how-to-create-a-full-width-slider-on-wordpress-elem…
Questions
- Can I create an Elementor slider without another plugin?
- Yes, Elementor can create sliders with its built-in widgets, so a separate slider plugin is not required for a basic design. Use Slides for a hero section, Image Carousel for a set of images, or Carousel for custom slide containers. The Slides widget is documented as an Elementor Pro feature, so the exact options available depend on your Elementor plan and installed features.
- Which Elementor widget should I use for a hero slider?
- Use the Slides widget for a hero slider containing a background image, heading, description, and button. Each slide has its own background, content, link, height, transition, and content animation settings. If Slides is unavailable, you can use a dedicated slider plugin or create a static hero section instead of forcing an image carousel to handle text-heavy layouts.
- How do I make an Elementor slider responsive?
- Make an Elementor slider responsive by checking its desktop, tablet, and mobile views separately. Adjust the slide height, padding, content width, image crop, and slides shown at each breakpoint. Always test the published page on a real phone, because text overlays, arrows, and buttons can fit in the editor but become clipped or difficult to use on the front end.
- Why is my Elementor slider too wide or cut off?
- An Elementor slider is usually too wide because the parent container, theme layout, padding, or gaps are adding width around it. Check the parent container’s content width, set full width when appropriate, and remove excess left and right padding. Also check for fixed widths or custom CSS on the widget. If it is inside a hidden tab or popup, open that element and recalculate the layout before judging the result.
- Should I use a slider plugin instead of Elementor’s widgets?
- Use Elementor’s widgets when you need one straightforward hero, image carousel, or content carousel and can configure it yourself. Use a slider plugin when you need more layouts, animation choices, media types, or reusable templates. Prime Slider Pro is an option for Elementor sites that need responsive hero and showcase layouts without building every slider structure from basic widgets.