Swiper Reactコンポーネント

Framework7には、強力で最もモダンなタッチスライダーであるSwiper Sliderが付属しており、非常に柔軟な設定と多くの機能を備えています。

Swiperライブラリは、すでにFramework7に統合されており、別途インストールする必要はありません。完全なAPIドキュメントとより多くの例については、公式の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;
}