Swiper React Component

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

Swiper React component represents Framework7's Swiper component.

Swiper Components

There are following components included:

  • Swiper / F7Swiper - main swiper element, which contains slides and paginations
  • SwiperSlide / F7SwiperSlide - a single slide element. Could contain any HTML inside

Swiper Properties

PropTypeDefaultDescription
<Swiper> properties
initbooleantrueInitializes Swiper
paramsobjectObject with Swiper API parameters
paginationbooleanEnables pagination
scrollbarbooleanEnables scrollbar
navigationbooleanEnables prev/next navigation buttons
<SwiperSlide> properties
zoombooleanAdds additional slide inner wrapping required for zoom-in functionality (should be also enabled via params on Swiper initialization)

Swiper Slots

Swiper React component (<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
<Swiper>
  <div slot="before-wrapper">Before Wrapper</div>
  <div slot="after-wrapper">After Wrapper</div>
  <SwiperSlide>Default Slot</SwiperSlide>
</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

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

With all controls

<Swiper pagination navigation scrollbar>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

With additional parameters

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

<Swiper navigation params={{speed:500, slidesPerView: 3, spaceBetween: 20}}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  <SwiperSlide>Slide 5</SwiperSlide>
  <SwiperSlide>Slide 6</SwiperSlide>
</Swiper>