Swiper is a component in Vue.js framework7. It is a powerful and modern touch slider till date. It offers a lot of features along with its super flexible configuration. Two components are included in the swiper component f7-swiper and f7-swiper-slide. F7-swiper-slide is a wrapper and f7-swiper is the main FAB element.  Properties for f7-swiper are init, params, pagination,scrollbar, navigation and property of  f7-swiper-slide is zoom. To install Swiper you need NPM. Using the npm command install swiper.

npm i swiper

Swiper has additional slots for custom elements.

Before-wrapper- The element will be inserted just before the swiper wrapper element.

After-wrapper- The element will be inserted right after swiper -wrapper div 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>