Get Started
Vue Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
- Forms
  - Checkboxes & Radios
  - Form Elements
  - Smart Select
- Icon
- Grid / Layout Grid
- Lists
  - List
  - List Item
  - List Button
  - Accordion List
  - Contacts List
  - Sortable List
  - Swipeout List
  - Virtual List
- Link
- Messages
- Message Bar
- Modals
  - Action Sheet
  - Login Screen
  - Picker Modal
  - Popover
  - Popup
- Navigation Bars
  - Navbar
  - Toolbar/Tabbar
  - Sub Navbar
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View

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.

Usage 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 next-button prev-button 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 next-button prev-button :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 initializatiin

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>

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
next-button	boolean		Enables next navigation button
prev-button	boolean		Enables previous navigation button
<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)

Access To Initialized Instance

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