Language: ENCN

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.