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 FAB element
    • SwiperSlide / F7SwiperSlide - wrapper for multiple FAB buttons used as Speed Dial FAB

    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
    navigation boolean Enables prev/next navigation buttons
    <SwiperSlide> properties
    zoom boolean Adds 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>
    </Swiper>