# swiper — Examples

## basic

```html
<swiper-ui aria-label="Product gallery">
  <card-ui variant="outlined">
    <img src="https://picsum.photos/seed/swiper1/800/360" alt="Mountain landscape" style="width:100%; height:200px; object-fit:cover;">
    <section>
      <col-ui gap="1">
        <text-ui strong>Mountain Retreat</text-ui>
        <text-ui color="subtle">Escape to the peaks with panoramic alpine views and fresh mountain air.</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <img src="https://picsum.photos/seed/swiper2/800/360" alt="Ocean sunset" style="width:100%; height:200px; object-fit:cover;">
    <section>
      <col-ui gap="1">
        <text-ui strong>Coastal Paradise</text-ui>
        <text-ui color="subtle">White sand beaches, turquoise waters, and stunning sunsets every evening.</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <img src="https://picsum.photos/seed/swiper3/800/360" alt="Forest path" style="width:100%; height:200px; object-fit:cover;">
    <section>
      <col-ui gap="1">
        <text-ui strong>Forest Lodge</text-ui>
        <text-ui color="subtle">Secluded cabins surrounded by ancient redwoods and winding trails.</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <img src="https://picsum.photos/seed/swiper4/800/360" alt="City skyline" style="width:100%; height:200px; object-fit:cover;">
    <section>
      <col-ui gap="1">
        <text-ui strong>Urban Explorer</text-ui>
        <text-ui color="subtle">Boutique hotels in the heart of the city with rooftop skyline views.</text-ui>
      </col-ui>
    </section>
  </card-ui>
</swiper-ui>
```

## slides-per-view

```html
<swiper-ui slides-per-view="3" gap="4" aria-label="Feature cards">
  <card-ui variant="outlined">
    <section>
      <col-ui gap="2">
        <icon-ui name="lightning" color="primary"></icon-ui>
        <text-ui strong>Fast</text-ui>
        <text-ui color="subtle">Sub-ms renders</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <section>
      <col-ui gap="2">
        <icon-ui name="paint-brush" color="accent"></icon-ui>
        <text-ui strong>Themeable</text-ui>
        <text-ui color="subtle">Design tokens</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <section>
      <col-ui gap="2">
        <icon-ui name="wheelchair" color="success"></icon-ui>
        <text-ui strong>Accessible</text-ui>
        <text-ui color="subtle">ARIA built-in</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <section>
      <col-ui gap="2">
        <icon-ui name="code" color="warning"></icon-ui>
        <text-ui strong>Simple</text-ui>
        <text-ui color="subtle">Light DOM</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui variant="outlined">
    <section>
      <col-ui gap="2">
        <icon-ui name="devices" color="danger"></icon-ui>
        <text-ui strong>Responsive</text-ui>
        <text-ui color="subtle">Container queries</text-ui>
      </col-ui>
    </section>
  </card-ui>
</swiper-ui>
```

## peek

```html
<swiper-ui slides-per-view="2" peek gap="4" aria-label="Peek demo">
  <card-ui>
    <section>
      <col-ui gap="2" align="center">
        <avatar-ui text="Jordan Lee" size="lg"></avatar-ui>
        <text-ui strong>Jordan Lee</text-ui>
        <text-ui color="subtle">Engineer</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui>
    <section>
      <col-ui gap="2" align="center">
        <avatar-ui text="Emma Davis" size="lg"></avatar-ui>
        <text-ui strong>Emma Davis</text-ui>
        <text-ui color="subtle">Designer</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui>
    <section>
      <col-ui gap="2" align="center">
        <avatar-ui text="Tom Wright" size="lg"></avatar-ui>
        <text-ui strong>Tom Wright</text-ui>
        <text-ui color="subtle">DevOps</text-ui>
      </col-ui>
    </section>
  </card-ui>
  <card-ui>
    <section>
      <col-ui gap="2" align="center">
        <avatar-ui text="Lisa Chang" size="lg"></avatar-ui>
        <text-ui strong>Lisa Chang</text-ui>
        <text-ui color="subtle">Staff Eng</text-ui>
      </col-ui>
    </section>
  </card-ui>
</swiper-ui>
```
