Quick answer: Elementor’s carousel widgets give you limited control over the pagination dots and navigation arrows. A little targeted CSS lets you resize the active dot, restyle the arrows, and hide either on mobile. Add a CSS class to the widget and target the Swiper classes below.
What you can restyle
Elementor’s carousels (Testimonial, Image, Loop, and Reviews carousels) are built on the Swiper library, so the dots and arrows carry predictable Swiper class names. Once you know them you can style them freely: the active pagination bullet, the previous/next arrows, and their position and visibility per breakpoint.
The CSS
/* Widen the active pagination dot into a pill */
.swiper-pagination-bullet-active {
width: 30px !important;
border-radius: 25px;
}
/* Restyle the arrow chevrons (thickness + colour) */
selector .eicon-chevron-left:before,
selector .eicon-chevron-right:before {
-webkit-text-stroke: 2px #f1f9fd;
}
/* Hide the arrows on mobile */
@media (max-width: 767px) {
selector .elementor-swiper-button-prev,
selector .elementor-swiper-button-next {
display: none;
}
}Where to add it
In the Elementor editor, select the carousel widget, open Advanced → Custom CSS, and paste the rules there — inside a widget’s Custom CSS you can use the selector keyword, which Elementor replaces with that widget’s unique wrapper, so the styles only affect this one carousel. If you prefer site-wide styling, move the rules to Appearance → Customize → Additional CSS and replace selector with the carousel’s own CSS class.
Adjusting it
- Active dot: change the
widthto make the pill longer or shorter. - Arrow colour and weight: the
-webkit-text-strokevalue sets the chevron thickness and colour. - Arrow position: Elementor already exposes vertical/horizontal position controls in the widget — use those first, and only reach for CSS when you need something they cannot do.
How to undo it
Delete the CSS. The carousel returns to Elementor’s default dot and arrow styling immediately — nothing structural changes.