# slider

The markup of every demo on <https://kuiper.oeds.it/slider/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## slider (navigation outside)

Varies: 9 specimens.

```html
<div class="card card-white" data-slider="finite: true;">
 <div class="slider-container">
  <div class="slider-items grid-xs" data-grid>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-4.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-5.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-6.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-7.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-8.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-9.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
</div>
```

## slider (navigation inside)

Varies: 9 specimens.

```html
<div class="card card-white" data-slider="finite: true;">
 <div class="slider-container">
  <div class="grid-xs slider-items grid-collapse" data-grid>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-4.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-5.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-6.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-7.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-8.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-9.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
 <div class="card position-center-left padding-xs"><button class="sidenav light-transparent" data-slider-item="previous" aria-label="Previous Slide"><i data-icon="angle-left"></i></button></div>
 <div class="card position-center-right padding-xs"><button class="sidenav light-transparent" data-slider-item="next" aria-label="Next Slide"><i data-icon="angle-right"></i></button></div>
 <div class="card position-bottom-center padding-xs"><ul class="slider-nav dotnav light-transparent dotnav-disc"></ul></div>
</div>
```

## slider (navigation inside) sets

Varies: 9 specimens.

```html
<div class="card card-white" data-slider="finite: true; sets: true;">
 <div class="slider-container">
  <div class="grid-xs slider-items grid-collapse" data-grid>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-4.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-5.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-6.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-top-left canvas-3-2" data-src="/images/thumbnail-7.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-center-center canvas-3-2" data-src="/images/thumbnail-8.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1 width-1-2@s width-1-2@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="background-cover background-bottom-right canvas-3-2" data-src="/images/thumbnail-9.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
 <div class="card position-center-left padding-xs"><button class="sidenav light-transparent" data-slider-item="previous" aria-label="Previous Slide"><i data-icon="angle-left"></i></button></div>
 <div class="card position-center-right padding-xs"><button class="sidenav light-transparent" data-slider-item="next" aria-label="Next Slide"><i data-icon="angle-right"></i></button></div>
 <div class="card position-bottom-center padding-xs"><ul class="slider-nav dotnav light-transparent dotnav-disc"></ul></div>
</div>
```