Repository navigation
Navigation and Pagination
yoshidaman99 edited this page Mar 21, 2026
·
1 revision
Arrows allow users to navigate between slides with prev/next buttons.
- In the Navigation section (Content tab), toggle Show Arrows to Yes
- Customize the icons using Elementor's icon picker
- Style them in the Navigation Arrows section (Style tab)
| Position | Description |
|---|---|
| Inside | Arrows overlap the carousel content |
| Outside | Arrows sit outside the carousel bounds (adds side margins) |
Both arrows use Elementor's native icon picker, supporting:
- Font Awesome (Solid, Regular, Brands)
- Material Design Icons
- Any custom icons uploaded via Elementor
Default: chevron-left / chevron-right
Pagination shows the current position and total slides.
| Type | Description | Best For |
|---|---|---|
| Bullets | Dots indicating each slide | General carousels, few slides |
| Fraction | "1 / 5" text format | Hero sliders, any count |
| Progress Bar | Animated progress bar | Autoplay carousels, hero banners |
When enabled with the Bullets type, only nearby dots are shown at full size while others shrink. This is useful for carousels with many slides.
When enabled, users can click bullets to jump directly to any slide.
| Position | CSS Justification |
|---|---|
| Bottom Center | text-align: center |
| Bottom Left | text-align: left |
| Bottom Right | text-align: right |
You can use arrows, pagination, or both simultaneously. For the best UX:
- Few slides (2-5): Bullets only or Arrows + Bullets
- Many slides (6+): Arrows + Fraction, or Arrows + Dynamic Bullets
- Autoplay hero: Progress Bar only
- Content carousel: Arrows + Bullets