Get Started
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

Swiper Vue Component

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

Swiper Vue component represents Framework7's Swiper component.

Swiper Components

There are following components included:

f7-swiper - main FAB element
f7-swiper-slide - wrapper for multiple FAB buttons used as Speed Dial FAB

Swiper Properties

Prop	Type	Default	Description
<f7-swiper> properties
init	boolean	true	Initializes Swiper
params	object		Object with Swiper API parameters
pagination	boolean		Enables pagination
scrollbar	boolean		Enables scrollbar
navigation	boolean		Enables prev/next navigation buttons
<f7-swiper-slide> properties
zoom	boolean		Adds additional slide inner wrapping required for zoom-in functionality (should be also enabled via params on Swiper initialization)

Swiper Slots

Swiper Vue component (<f7-swiper>) has additional slots for custom elements:

before-wrapper - element will be inserted right before <div class="swiper-wrapper"> element
after-wrapper - element will be inserted right after <div class="swiper-wrapper"> element

<f7-swiper>
  <div slot="before-wrapper">Before Wrapper</div>
  <div slot="after-wrapper">After Wrapper</div>
  <f7-swiper-slide>Default Slot</f7-swiper-slide>
</f7-swiper>

<!-- Renders to: -->

<div class="swiper-container">
  <div>Before Wrapper</div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Default Slot</div>
  </div>
  <div>After Wrapper</div>
</div>

Access To Swiper Instance

If you use automatic initalization to init Swiper (with init:true prop) and need to use Swiper API you can access its initialized instance by accessing .swiper component's property.

Examples

Minimal layout

<f7-swiper>
  <f7-swiper-slide>Slide 1</f7-swiper-slide>
  <f7-swiper-slide>Slide 2</f7-swiper-slide>
  <f7-swiper-slide>Slide 3</f7-swiper-slide>
</f7-swiper>

With all controls

<f7-swiper pagination navigation scrollbar>
  <f7-swiper-slide>Slide 1</f7-swiper-slide>
  <f7-swiper-slide>Slide 2</f7-swiper-slide>
  <f7-swiper-slide>Slide 3</f7-swiper-slide>
</f7-swiper>

With additional parameters

You can pass any additional Swiper API parameters using params property:

<f7-swiper navigation :params="{speed:500, slidesPerView: 3, spaceBetween: 20}">
  <f7-swiper-slide>Slide 1</f7-swiper-slide>
  <f7-swiper-slide>Slide 2</f7-swiper-slide>
  <f7-swiper-slide>Slide 3</f7-swiper-slide>
</f7-swiper>