# slideshow

The markup of every demo on <https://kuiper.oeds.it/slideshow/>, 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-`.

## slideshow (navigation outside)

Varies: 3 specimens.

Shown 2 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div class="card card-white" data-slideshow="finite: true;">
 <div class="slideshow-container">
  <div class="grid-xs slideshow-items grid-collapse" data-grid>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-top-left canvas-16-9" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-center-center canvas-16-9" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-bottom-right canvas-16-9" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
</div>
```

## slideshow (navigation inside)

Varies: 3 specimens.

```html
<div class="card card-white" data-slideshow="finite: true;">
 <div class="slideshow-container">
  <div class="grid-xs slideshow-items grid-collapse" data-grid>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-top-left canvas-16-9" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-center-center canvas-16-9" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-bottom-right canvas-16-9" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
 <div class="card position-center-left padding-xs"><button class="sidenav light-transparent" data-slideshow-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-slideshow-item="next" aria-label="Next Slide"><i data-icon="angle-right"></i></button></div>
 <div class="card position-bottom-center padding-xs"><ul class="slideshow-nav dotnav light-transparent"></ul></div>
</div>
```

## slideshow (navigation inside)

Varies: 3 specimens.

```html
<div class="card card-white" data-slideshow="finite: true;">
 <div class="slideshow-container">
  <div class="grid-xs slideshow-items grid-collapse" data-grid>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-top-left canvas-16-9" data-src="/images/thumbnail-1.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-center-center canvas-16-9" data-src="/images/thumbnail-2.jpg" data-img="loading: eager;"></canvas></div></div>
   <div class="width-1-1"><div class="card"><canvas class="background-cover background-bottom-right canvas-16-9" data-src="/images/thumbnail-3.jpg" data-img="loading: eager;"></canvas></div></div>
  </div>
 </div>
 <div class="card position-center-left padding-xs"><button class="sidenav light-transparent" data-slideshow-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-slideshow-item="next" aria-label="Next Slide"><i data-icon="angle-right"></i></button></div>
 <div class="card position-bottom-center padding-xs"><ul class="slideshow-nav dotnav dotnav-disc light-transparent"></ul></div>
</div>
```
