スワイパー React コンポーネント

Framework7 には、これまでで最も強力で最新のタッチスライダーであるスワイプスライダーが搭載されています。豊富な機能を備えており、構成も非常に柔軟です。

スワイパーライブラリは Framework7 に統合されており、別途インストールする必要はありません。

スワイパー React コンポーネントは、スワイパー Element を優先して Framework7 には含まれていません。

完全な API ドキュメントとさらに詳しい例については、公式のスワイパー Element ドキュメントを参照してください。

例

swiper-multiple.jsx

import React from 'react';
import { Navbar, Page, BlockTitle } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Multiple Swipers"></Navbar>
    <BlockTitle>1 Slide Per View, 50px Between</BlockTitle>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <BlockTitle>2 Slides Per View, 20px Between</BlockTitle>
    <swiper-container
      pagination
      class="demo-swiper-multiple"
      space-between="20"
      slides-per-view="2"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <BlockTitle>3 Slides Per View, 10px Between</BlockTitle>
    <swiper-container
      pagination
      class="demo-swiper-multiple"
      space-between="10"
      slides-per-view="3"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <BlockTitle>Auto Slides Per View + Centered</BlockTitle>
    <swiper-container
      pagination
      class="demo-swiper-multiple demo-swiper-multiple-auto"
      space-between="10"
      slides-per-view="auto"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>

    <BlockTitle>Vertical, 10px Between</BlockTitle>
    <swiper-container
      pagination
      class="demo-swiper-multiple"
      space-between="10"
      direction="vertical"
    >
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
    </swiper-container>

    <BlockTitle>Slow speed</BlockTitle>
    <swiper-container pagination class="demo-swiper-multiple" space-between="50" speed="900">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper-container>
  </Page>
);

このドキュメントを改善する