Slideshows

The Codebase slideshow component is a variation on tabs. It is intended only for manually showing and hiding content, e.g. product images in an ecommerce single product page.

The slide control indicator pips are simply buttons with no content, with a set width and height.

<div class="slide-wrapper">
  <div class="slide-panel active" id="slide-panel-1">
    <!-- Slide 1 -->
  </div>
  <div class="slide-panel" id="slide-panel-2">
    <!-- Slide 2 -->
  </div>
  <div class="slide-panel" id="slide-panel-3">
    <!-- Slide 3 -->
  </div>
  <div class="flex flex-center py-3">
    <button
      class="slide-control rounded-pill b-thin mx-1 active"
      aria-controls="slide-panel-1"
      aria-expanded="true"
      data-control="tab"
      style="width: 2rem; height: 1rem"></button>
    <button
      class="slide-control rounded-pill b-thin mx-1"
      aria-controls="slide-panel-2"
      aria-expanded="false"
      data-control="tab"
      style="width: 2rem; height: 1rem"></button>
    <button
      class="slide-control rounded-pill b-thin mx-1"
      aria-controls="slide-panel-3"
      aria-expanded="false"
      data-control="tab"
      style="width: 2rem; height: 1rem"></button>
  </div>
</div>