スポンサースポンサーになる

スワイパー Svelte コンポーネント

Framework7 には、これまでで最も強力で最新機能のタッチスライダーであるスワイパー・スライダーが搭載されており、非常に柔軟な構成と数多くの機能を備えています。

スワイパーライブラリは既に Framework7 に統合されており、別途インストールする必要はありません。

スワイパー Svelte コンポーネントは、スワイパーエレメントを優先して Framework7 には含まれていません。

完全な API ドキュメントと詳細な例については、公式の スワイパーエレメントドキュメント をご覧ください。

例

swiper-multiple.svelte
<script>
  import { Navbar, Page, BlockTitle } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Multiple Swipers" />
  <BlockTitle>1 Slide Per View, 50px Between</BlockTitle>
  <swiper-container pagination={true} class="demo-swiper-multiple" space-between={50}>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper-container>

  <BlockTitle>2 Slides Per View, 20px Between</BlockTitle>
  <swiper-container
    pagination={true}
    class="demo-swiper-multiple"
    space-between={20}
    slides-per-view={2}
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper-container>

  <BlockTitle>3 Slides Per View, 10px Between</BlockTitle>
  <swiper-container
    pagination={true}
    class="demo-swiper-multiple"
    space-between={10}
    slides-per-view={3}
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper-container>

  <BlockTitle>Auto Slides Per View + Centered</BlockTitle>
  <swiper-container
    pagination={true}
    class="demo-swiper-multiple demo-swiper-multiple-auto"
    space-between={10}
    slides-per-view={'auto'}
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper-container>

  <BlockTitle>Vertical, 10px Between</BlockTitle>
  <swiper-container
    pagination={true}
    class="demo-swiper-multiple"
    space-between={10}
    direction="vertical"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
  </swiper-container>

  <BlockTitle>Slow speed</BlockTitle>
  <swiper-container pagination={true} class="demo-swiper-multiple" space-between={50} speed={900}>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>
  </swiper-container>
</Page>
このドキュメントを改善する