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.

Usage examples

Minimal layout

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</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

<Swiper pagination nextButton prevButton scrollbar>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</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:

<Swiper nextButton prevButton params={{speed:500, slidesPerView: 3, spaceBetween: 20}}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</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:

<Swiper init={false}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

Properties

Prop	Type	Default	Description
<Swiper> properties
init	boolean	true	Initializes Swiper
params	object		Object with Swiper API parameters
pagination	boolean		Enables pagination
scrollbar	boolean		Enables scrollbar
nextButton	boolean		Enables next navigation button
prevButton	boolean		Enables previous navigation button
<SwiperSlide> 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.