-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- 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 elementf7-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">
elementafter-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-navbar>
<!-- 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>
<!-- Renders to: -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
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>
<!-- Renders to: -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
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>
With manual initialization
In all the examples above Swiper will be initialized automatically. If you don't need it and need to init it manually then pass init: false
prop:
<f7-swiper :init="false">
<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>