Swiper - 图1

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 swiper element, which contains slides and paginations
  • f7-swiper-slide - a single slide element. Could contain any HTML inside

Swiper Properties

PropTypeDefaultDescription
<f7-swiper> properties
initbooleantrueInitializes Swiper
paramsobjectObject with Swiper API parameters
paginationbooleanEnables pagination
scrollbarbooleanEnables scrollbar
navigationbooleanEnables prev/next navigation buttons
<f7-swiper-slide> properties
zoombooleanAdds 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
  1. <f7-swiper>
  2.   <div slot="before-wrapper">Before Wrapper</div>
  3.   <div slot="after-wrapper">After Wrapper</div>
  4.   <f7-swiper-slide>Default Slot</f7-swiper-slide>
  5. </f7-swiper>
  7. <!-- Renders to: -->
  9. <div class="swiper-container">
  10.   <div>Before Wrapper</div>
  11.   <div class="swiper-wrapper">
  12.     <div class="swiper-slide">Default Slot</div>
  13.   </div>
  14.   <div>After Wrapper</div>
  15. </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

  1. <f7-swiper>
  2.   <f7-swiper-slide>Slide 1</f7-swiper-slide>
  3.   <f7-swiper-slide>Slide 2</f7-swiper-slide>
  4.   <f7-swiper-slide>Slide 3</f7-swiper-slide>
  5. </f7-swiper>

With all controls

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

With additional parameters

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

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

← Swipeout

Tabs →