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 library already integrated into Framework7 and you don't have to install it separately. For the full API documentation and more examples check out the official Swiper for React documentation.

Examples

import React from 'react';
import { Page, Navbar, BlockTitle, Swiper, SwiperSlide, Block } from 'framework7-react';
import './swiper.css';

export default () => (
  
    
  <Page>
    <Navbar title="Swiper" />
    <BlockTitle>Minimal Layout</BlockTitle>
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>

    <BlockTitle>With all controls</BlockTitle>
    <Swiper pagination navigation scrollbar>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>

    <BlockTitle>With additional parameters</BlockTitle>
    <Swiper navigation 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>

    <Block />
  </Page>
    
  
);

/* swiper.css */
.swiper-slide {
  background: #fff;
  text-align: center;
  font-size: 18px;
  line-height: 200px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}