Swiper Svelte Component

Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features.

Swiper library already integrated into Framework7 and you don't have to install it separately.

Swiper Svelte components are not included in Framework7 in favor of Swiper Element.

For the full API documentation and more examples check out the official Swiper Element documentation.

Examples

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>

Improve this Doc