carousel

<tosi-carousel arrows dots max-visible-items=2 auto=2 snap-delay=4 snap-duration=0.5 loop>
  <tosi-icon icon="tosiFavicon" class="thing"></tosi-icon>
  <tosi-icon icon="tosi" class="thing"></tosi-icon>
  <tosi-icon icon="tosiUi" class="thing"></tosi-icon>
  <tosi-icon icon="tosiPlatform" class="thing"></tosi-icon>
  <tosi-icon icon="tosiXr" class="thing"></tosi-icon>
  <tosi-icon icon="blueprint" class="thing"></tosi-icon>
  <tosi-icon icon="cmy" class="thing"></tosi-icon>
  <tosi-icon icon="rgb" class="thing"></tosi-icon>
</tosi-carousel>

.thing {
  --tosi-icon-size: 160px;
  height: 160px;
  margin: 30px 0 70px;
  position: relative;
}

.thing::after {
  content: attr(icon);
  color: white;
  position: absolute;
  bottom: -50px;
  left: 50%;
  padding: 5px 15px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px #0008);
  background: #0004;
  border-radius: 5px;
}

.preview tosi-carousel {
  background: #8883;
  margin: 10px;
  border-radius: 10px;
}

This is a minimalist carousel component that supports the usual stuff.

Attributes

• arrows (boolean, false by default) shows/hides the arrow paging controls
• dots (boolean, false by default) shows/hides the dot progress indicators
• max-visible-items (number, 1 by default) determines how many items are shown at once.
• snap-duration (number, 0.25 [seconds] by default) determines the time taken to scroll / snap scroll.
• snap-delay (number, 0.1 [seconds] by default)
• loop (boolean, false by default) causes next/previous buttons to loop
• auto (number, 0 [seconds] by default) if > 0, automatically advances after that many seconds (always loops!)