> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/~/changes/ya8CSeFxwPyu94dBt1WL/theme-settings/general/slider-navigation-dots-arrows-and-page-pagination.md).

# Slider Navigation Dots, Arrows and Page Pagination

{% hint style="info" %}
Slideshow, Image Banner, Product Block, Product Recommendations and Recently Viewed Product Sections will have separate settings for navigation arrow positions. 
{% endhint %}

## Dots Style

| Setting | Description                                                                                                                                                                                                                                                                                                         |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Style   | <p>Select the style of slider pagination dots. </p><p><mark style="color:orange;"><strong>Style 1:</strong></mark> Dots will simply styled with its background, border and hover state color.</p><p><mark style="color:orange;"><strong>Style 2:</strong></mark> Dots group will also have a background layer. </p> |

## Arrows Style

| Setting                                    | Description                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Style                                      | <p>Select the style of slider navigation arrows. <mark style="color:orange;"><strong>Style 1:</strong></mark> Thin caret with large angle.</p><p><mark style="color:orange;"><strong>Style 2:</strong></mark> Arrows have longer tails. <br><mark style="color:orange;"><strong>Style 3:</strong></mark> Thick caret with small angle.</p> |
| Enable Button Arrows 'Disable'?            | Show the arrow even when the slider has reached its end of items length.                                                                                                                                                                                                                                                                   |
| Border Width                               | Determine the thickness of pagination arrow borders.                                                                                                                                                                                                                                                                                       |
| Border Radius                              | Round the corners of arrow. The range is from 0% (arrow border is a rectangle), to 50% (arrow border is a circle).                                                                                                                                                                                                                         |
| Width Arrows/ Height Arrows                | Determine the width and height of the arrow border.                                                                                                                                                                                                                                                                                        |
| Size Icon Arrows                           | Determine the size of the arrow icon inside the border.                                                                                                                                                                                                                                                                                    |
| Position Horizontal Arrow - (Unit % or px) | Fill in the desired positions of arrows horizontally relative to their slider.                                                                                                                                                                                                                                                             |

## Pagination

Settings for page pagination such as blogs page.

| Setting   | Description                                                                                                                                                                                                                                                                                                                                                 |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout    | <p>Select the style for the pagination. <br><mark style="color:orange;"><strong>Style 1:</strong></mark> Pagination arrows are text "prev" and "next".<br><mark style="color:orange;"><strong>Style 2:</strong></mark> Pagination arrows are carets.<br><mark style="color:orange;"><strong>Style 3:</strong></mark> Pagination arrows are long-tailed.</p> |
| Alignment | Align the Pagination cluster to the left, right or center of the products grid.                                                                                                                                                                                                                                                                             |