Carousels are a great way to add eye-catching and interactive visual content to websites, and an Elementor vertical carousel slider can be a great way to showcase a variety of content in a visually engaging manner. Instead of the usual left-right swipe, slides move up and down – a layout that fits sidebars, storytelling sections, and any design where horizontal space is tight but vertical space is not.
What It Does
The Carousel Anything widget in The Plus Addons for Elementor includes a Slider Mode setting that switches the carousel’s scroll axis from the default horizontal direction to vertical. Once enabled, slides stack on top of each other and transition up or down instead of left to right, while every other Carousel Anything setting (columns, spacing, autoplay, styling) keeps working the same way on top of the new axis.
Requirement – This is a Pro feature. You need The Plus Addons for Elementor Pro to switch Carousel Anything to Vertical mode. Upgrade to Pro to unlock it along with 120+ other widgets.
Why It Matters
A horizontal carousel is not always the right fit for the space you are designing. Sidebars, tall hero sections, and single-column mobile layouts often have more vertical room than horizontal room. A vertical carousel lets you keep a scrolling, auto-rotating content block in those spaces without cramming a wide slider into a narrow column, and it gives visitors a scroll direction that feels natural next to the rest of the page.
What You Get
- A one-click Slider Mode > Vertical switch inside the existing Carousel Anything widget – no separate widget to learn
- Full compatibility with Carousel Anything’s other Pro controls: Autoplay, Infinite Mode, and Center Mode all work in vertical orientation
- The same responsive column, spacing, and styling controls you already use in horizontal carousels
Benefits
- Space-efficient – fits narrow sidebars and tall single-column sections where a horizontal slider would look cramped
- No extra plugin – it is a mode switch on the widget you are already using for horizontal carousels
- Consistent styling – arrows, dots, spacing, and Pro effects carry over from the horizontal carousel, so you are not restyling from scratch
Capabilities
Vertical mode is a Slider Mode option inside Carousel Anything’s Style tab, under Carousel Options. It changes the axis slides move along; it does not remove or replace any other setting. Draggable/touch scrolling, arrows, dots, and slide spacing all remain configurable while the carousel runs vertically.
How It Works
The Carousel Anything widget renders its slide track as a flex container. The Slider Mode setting flips that track’s direction from row to column, so the underlying slide-transition logic (drag, touch, arrow-click, autoplay) fires along the vertical axis instead of the horizontal one. Because it is the same rendering engine, features like Center Mode and Infinite Mode apply their effects along whichever axis is active.
How to Use It
To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, click here.
1. Add the Carousel Anything widget to the page and create your slides as usual.
2. Go to the Style tab > Carousel Options > Slider Mode, and from the dropdown choose Vertical.
With this feature, you can create an amazing vertical image carousel with Elementor.
Also Read: how to show/hide arrows & dots in the Elementor carousel slider to style the navigation on a vertical carousel.
Also Read: how to increase the center slide size in an Elementor carousel to combine Center Mode with a vertical layout.
Use Cases
- Sidebar content feeds – news tickers, latest-post lists, or announcement panels running vertically in a narrow column
- Storytelling sections – step-by-step or scroll-driven narratives that read top to bottom
- Product spotlight columns – WooCommerce stores highlighting a rotating set of products in a tall sidebar widget area
Limitations
- Vertical mode is a Pro-only setting; it is not available in the free version of The Plus Addons for Elementor.
- The slide direction inside Vertical mode currently always animates in the same order; there is no separate “reverse” toggle for running two vertical carousels in opposite directions on the same page (confirmed via a live support ticket, see Troubleshooting).
- Vertical carousels need an explicit height on their container; if the section/column has no fixed or minimum height, slide height can look inconsistent on resize.
Troubleshooting
- Arrows or pagination dots don’t match a reference design. Ticket #20277 (“Arrows and Pagination to the Vertical Carousel”) – the carousel worked, but the customer needed a different arrow/dot visual style. Style the vertical carousel’s navigation the same way as a horizontal one: Style tab > Show Arrows / Show Dots, then pick an Arrow Style / Dots Style from the dropdown.
- Two vertical carousels on the same page always scroll the same direction. Ticket #19973 (“Carousel order ascending / descending”) – a customer wanted one vertical carousel to run “descending” and an adjacent one “ascending.” There is no per-instance reverse-direction control for Vertical mode today; each Carousel Anything instance runs its own independent Slide Direction / Draggable settings, but not a mirrored scroll order.
- Slide Direction setting seems to have no effect in Vertical mode. Ticket #11954 (“Carousel Anything for Elementor”) – a customer trying to reverse the vertical animation found that the Slide Direction control (built for horizontal carousels) does not apply once Slider Mode is set to Vertical.
- Vertical carousel stutters when the browser window is resized. Ticket #11955 (“Carousel Anything for Elementor stutter”) – reported on a live site where the vertical carousel visibly stuttered while the viewport was being resized. Give the carousel’s parent column/section a fixed height rather than relying on `auto`, and avoid nesting it inside another element that also resizes with the viewport.
