Pager dots
One dot per slide, as a lighter alternative or complement to thumbnails.
<Lightbox pager thumbnails={false} {...props} />pager adds a row of dots, one per slide, above the thumbnail strip or in its place. It is off by default, and shows only when there is more than one slide.
Live demo. Click a thumbnail to open it.
- The dots are a
navnamed bylabels.pager. - Each dot is a button named by
labels.pagerItem(index, total, slide), witharia-current="true"on the current one. - Each button is at least 24 by 24px, even though the visible dot is smaller.
- With more than 12 slides it shows a window of 12 dots around the current one. The edge dots shrink, and get
data-more, when there are more slides past them. Each dot still names its real position. - Dots suit short galleries. Long ones read better with thumbnails.
Styling
| Variable | Default | Used for |
|---|---|---|
--eg-pager-height | 40px | Space reserved for the dots |
--eg-pager-dot-size | 8px | Visible dot |
--eg-pager-dot-gap | 4px | Space on each side of a dot |
--eg-pager-dot-color | rgb(255 255 255 / 0.4) | Dots other than the current one |
--eg-pager-dot-active-color | var(--eg-color) | Current dot |
Classes: eg-pager and eg-pager-dot. classNames.pager and classNames.pagerDot add your own. The root gets data-pager when the dots are shown.