Swiper Vue 组件
Framework7 配备有功能强大且最现代的触控滑块 - Swiper Slider，它具有超级灵活的配置和大量功能。
Swiper 库已集成到 Framework7 中，你不必单独安装它。
Swiper Vue 组件不包含在 Framework7 中，建议使用 Swiper Element。
有关完整 API 文档和更多示例，请查看官方 Swiper Element 文档。
示例
swiper-multiple.vue
<template>
<f7-page>
<f7-navbar title="Multiple Swipers"></f7-navbar>
<f7-block-title>1 Slide Per View, 50px Between</f7-block-title>
<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>
<f7-block-title>2 Slides Per View, 20px Between</f7-block-title>
<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>
<f7-block-title>3 Slides Per View, 10px Between</f7-block-title>
<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>
<f7-block-title>Auto Slides Per View + Centered</f7-block-title>
<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>
<f7-block-title>Vertical, 10px Between</f7-block-title>
<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>
<f7-block-title>Slow speed</f7-block-title>
<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>
</f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
export default {
components: {
f7Navbar,
f7Page,
f7BlockTitle,
},
};
</script>