Arrows and dots tell visitors there is more to see, but not every carousel needs both.
The Carousel Anything widget from The Plus Addons for Elementor lets you switch its dots and arrows on or off separately, and choose how and where they appear.
To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free for Show Dots, dots Style 1, Overlay Content Dots and Show Arrows. Pro for the other dot and arrow styles, the arrow position and colours, Direction Dots, On Hover Dots, On Hover Arrow and Outer Content Arrow.
- Widget to enable: Carousel Anything, switched on under The Plus Addons > Widgets.
- Slides: one saved Elementor template per slide, created under Templates > Saved Templates and published.
Step 1: Set Up the Dots
- Select the Carousel Anything widget and open Style > Carousel Options, Desktop tab.
- Show Dots is on by default. Turn it off to hide the dots.
- Pick a Dots Style. Style 1 is free; Style 2 to Style 7 need Pro.
- Keep Overlay Content Dots on to place the dots over the bottom of the slides, or turn it off to put them below the slides.
- In Pro, turn on Direction Dots for a vertical row of dots, or On Hover Dots to show the dots only while the pointer is over the carousel.
Step 2: Set Up the Arrows
- Turn on Show Arrows. Arrows are off by default.
- Pick an Arrows Style. Style 1 is free; Style 2 to Style 6 need Pro. For Style 3 and Style 4 a second dropdown, also named Arrows Style, sets the position (Top-Right, Bottom-Left, Bottom-Center or Bottom-Right).
- Set the arrow colours for the normal and hover state.
- In Pro, turn on Outer Content Arrow to move the arrows outside the slides, or On Hover Arrow to show them only on hover.
Publish the page to see the result.
How It Behaves
- Clicking a dot moves the carousel to that slide; the arrows move it one step (or one row, with All Visible Columns).
- With On Hover Dots or On Hover Arrow, the dots or arrows are invisible until the pointer is over the carousel.
- Direction Dots stacks the dots vertically at the left side of the carousel.
- Tablets and phones can have their own dots and arrows: turn on Responsive Tablet or Responsive Mobile in that tab and set Show Dots and Show Arrows there.
Limitations
- Outer Content Arrow needs space at the sides. In our test the arrows moved 80 px out, and with only 40 px of container padding the left arrow was partly off the screen. Add side padding to the container.
- The position dropdown for Style 3 and Style 4 has the same label as the style dropdown, Arrows Style.
- In the free plugin the arrows always look the same: small arrows without a background, whatever you pick in Arrows Style. In our test Arrow Background Color had no effect there.
- With both dots and arrows hidden, visitors can only move the carousel by dragging, autoplay or a connected widget.
Troubleshooting
The arrows are cut off at the edge of the screen
Turn off Outer Content Arrow, or give the container more padding on the left and right.
The dots cover the slide content
Turn off Overlay Content Dots so the dots sit below the slides.
