---
title: "How to show/hide Arrows & Dots in the Elementor Carousel slider?"
url: https://theplusaddons.com/docs/showhide-arrows-dots-in-elementor-carousel/
date: 2023-02-16
modified: 2026-09-04
lang: en
author: "Aditya Sharma"
description: "If you are using autoplay on your slider or controlling your slider with the Carousel Remote widget or any other widget, you might want to hide the navigation options like..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/Hide-Arrows-_-Dots-in-the-Elementor-Carousel-slider-1024x536.jpg
word_count: 1109
---

# How to show/hide Arrows & Dots in the Elementor Carousel slider?

## 

- Carousel Anything widget permite activar o desactivar Show Dots y Show Arrows de forma independiente, así que un carrusel puede mostrar solo puntos, solo flechas, ambos o ninguno.
- The Plus Addons for Elementor incluye este widget y los toggles base Show Dots y Show Arrows son gratuitos, mientras que Direction Dots, On Hover Dots, Outer Content Arrow y On Hover Arrow son Pro-only.
- Show Dots y Show Arrows eliminan el elemento del DOM cuando se apagan, por lo que no ocupa espacio de diseño ni recibe foco para navegación con teclado o lector de pantalla.
- Outer Content Arrow coloca las flechas fuera de los límites del carrusel y On Hover Arrow las muestra solo al pasar el cursor, una opción útil para carruseles de imágenes o vídeo con un diseño más limpio por defecto.

If you are using autoplay on your slider or controlling your slider with the Carousel Remote widget or any other widget, you might want to hide the navigation options like arrows and dots from your Elementor carousel widget.

Table Of Contents

## What It Does

The Carousel Anything widget's Show Dots and Show Arrows toggles let you turn each navigation element on or off independently, so a carousel can ship with dots only, arrows only, both, or neither.

***Requirement – This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** The base Show Dots and Show Arrows toggles are free; several of the styling sub-options they reveal (Direction Dots, On Hover Dots, On Hover Arrow, Outer Content Arrow) are Pro-only, confirmed against the current plugin source and called out below.

*To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, [click here](/docs/carousel-anything-elementor-widget-settings-overview/).*

## Why It Matters

Not every carousel needs visible navigation: an autoplay-only hero slider often looks cleaner with no arrows or dots at all, while a carousel driven by a separate Carousel Remote widget doesn't need its own duplicate controls. Being able to toggle dots and arrows independently avoids visual clutter and prevents conflicting navigation controls on the same carousel.

## What You Get

- **Show Dots** and **Show Arrows** toggles, each independent of the other (free)
- **Overlay Content Dots** to place dots over the slide content instead of below it (free)
- **Direction Dots**, **On Hover Dots**, **Outer Content Arrow**, and **On Hover Arrow** for finer control over positioning and visibility (Pro)

## Benefits

- **Cleaner autoplay carousels** – hide navigation entirely when the carousel rotates on its own
- **No duplicate controls** – hide native dots/arrows when a Carousel Remote widget already provides navigation
- **Reveal-on-hover option (Pro)** – keep the layout minimal by default and only show controls when a visitor's cursor is on the carousel

## Capabilities

Show Dots and Show Arrows are the base toggles; each reveals its own set of sub-options once turned on. Under dots: Overlay Content Dots (free) plus Direction Dots and On Hover Dots (Pro). Under arrows: Outer Content Arrow and On Hover Arrow (Pro), plus multiple arrow styles where the more advanced styles are Pro-only.

## How It Works

Turning Show Dots or Show Arrows off removes that element from the DOM entirely rather than just hiding it visually, so it doesn't take up layout space or receive focus for keyboard/screen-reader navigation. The Pro positioning options (Direction Dots, Outer Content Arrow) change where the element renders relative to the slide content; the Pro visibility options (On Hover Dots, On Hover Arrow) keep the element in the DOM but transition its opacity on hover.

## How to Use It

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/carousel-slider/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To control the dots navigation, add the Carousel Anything widget on the page and after you have created your slides, go to the **Style** tab, under the **Carousel Options** turn on the **Show Dots** toggle (free).

![Elementor editor panel showing the Carousel Anything Show Dots toggle turned on under Carousel Options](https://theplusaddons.com/wp-content/uploads/2023/02/Tpae-Carousel-Anything-Style-Show-Dots.png)
The Show Dots toggle in the Carousel Anything Style panel (free)

Once the toggle is on, you will see various options related to the dots navigation. You can apply different styles, change colours, and adjust top padding.

**Overlay Content Dots** (free) – Use this option when you want the dot navigation to appear over the slide content rather than below it. This is useful for full-bleed image or video carousels where adding space beneath the slide is not desirable.

**Direction Dots** (Pro) – This option aligns the dots vertically along the side of the slider instead of the default horizontal position at the bottom. Use it when your carousel is tall or when a side-aligned indicator fits your layout better.

**On Hover Dots** (Pro) – This makes the dot navigation visible only when a visitor hovers over the carousel. Use it when you want a cleaner look by default and prefer to reveal controls only on interaction.

To control the arrow navigation, turn on the **Show Arrow** toggle (free).

![Elementor editor panel showing the Carousel Anything Show Arrows toggle turned on under Carousel Options](https://theplusaddons.com/wp-content/uploads/2023/02/Tpae-Carousel-Anything-Style-Show-Arrows.png)
The Show Arrows toggle in the Carousel Anything Style panel (free)

Once turned on, you will find styling and customization options for the arrow navigation. You can choose different icon styles for the arrow and adjust its colour and background colour (some arrow styles are Pro-only).

**Outer Content Arrow** (Pro) – This places the arrows outside the carousel boundaries rather than overlapping the slide content. Use this when your slides contain text or images that arrows would obscure if placed inside.

**On Hover Arrow** (Pro) – With this option, the navigation arrows are visible only when a visitor hovers over the carousel. This keeps the slide content in focus by default and is a good choice for image-heavy or video carousels.

***Also Read:*** [How to create a multiple columned Elementor Carousel Slider](https://theplusaddons.com/docs/multiple-columned-elementor-carousel-slider/) for multi-column layouts.

***Also Read:*** [how to create a full-width Carousel Slider in Elementor](https://theplusaddons.com/docs/full-width-carousel-slider-in-elementor/) where dot and arrow placement has the most visual impact.

## Use Cases

- Portfolio or agency sites that use autoplay carousels where navigation arrows would clutter a minimal design
- E-commerce product sliders controlled by an external Carousel Remote widget, where dot and arrow controls are redundant
- Landing pages that need hover-only navigation (Pro) to keep the layout clean until the visitor engages with the slider

## Limitations

- Show Dots and Show Arrows themselves are free, but Direction Dots, On Hover Dots, Outer Content Arrow, and On Hover Arrow are Pro-only.
- Several of the more decorative arrow icon styles are also Pro-only; the free tier offers a smaller base set.
- Hiding both dots and arrows removes all built-in navigation; make sure the carousel has Autoplay, swipe/drag, or a Carousel Remote widget so visitors can still move through slides.

## Troubleshooting

- **Arrow color/background doesn't match the site's theme styling.** Ticket #7272 ("Product IMage carousel") – a customer reported carousel arrows not centered and not taking the color set in Elementor's styling section, particularly in Safari. Re-check the arrow color settings per browser and confirm no theme CSS is overriding the widget's own arrow color rule.
- **Arrows or dots don't line up correctly next to tab-linked carousel titles.** Ticket #11513 ("Image rollover in tabs") – a customer combining Tabs with Carousel Anything noticed uneven spacing between the first two tab columns; check for extra padding/margin on the tab wrapper rather than the dots/arrows settings themselves.
- **Turning off Show Dots and Show Arrows leaves visitors with no way to navigate.** If neither is enabled, confirm Autoplay, Draggable/swipe, or an external Carousel Remote widget is active so the carousel remains navigable.

## Suggested Reading

- [How to create a multiple columned Elementor Carousel Slider](https://theplusaddons.com/docs/multiple-columned-elementor-carousel-slider/)
- [How to create a full-width Carousel Slider in Elementor](https://theplusaddons.com/docs/full-width-carousel-slider-in-elementor/)
- [How to create Vertical Elementor Carousel Slider](https://theplusaddons.com/docs/vertical-elementor-carousel-slider/)