React组件

安装

Swiper React仅作为主要Swiper库的一部分通过NPM可用：

  npm i swiper

用法

swiper/react导出2个组件：Swiper和SwiperSlide：

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

默认情况下，Swiper React使用Swiper的核心版本（没有任何其他模块）。如果要使用导航，分页和其他模块，则必须先安装它们。这是其他模块导入的列表：

Virtual -虚拟幻灯片模块
Keyboard -键盘控制模块
Mousewheel -鼠标滚轮控制模块
Navigation -导航模块
Pagination -分页模块
Scrollbar -滚动条模块
Parallax -视差模块
Zoom -缩放模块
Lazy -懒模块
Controller -控制器模块
A11y -辅助功能模块
History -历史记录导航模块
HashNavigation -哈希导航模块
Autoplay -自动播放模块
EffectFade -淡入淡出效果模块
EffectCube -立方体效果模块
EffectFlip -翻转效果模块
EffectCoverflow -Coverflow效果模块
Thumbs -拇指模块
// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

注意，组队，探索阵营组件，如果你通过这些PARAMS将为导航，分页和滚动条必需的元素，而无需指定它的元素（如没有navigation.nextEl，等等） pagination.el
款式
Swiper软件包包含不同的CSS，Less和SCSS样式集：

CSS样式

CSS样式仅适用于捆绑版本：

swiper-bundle.css -所有Swiper样式，包括所有模块样式（例如导航，分页等）
swiper-bundle.min.css -与以前相同，但缩小了
样式少
较少的样式是核心版本和模块的单独样式：

swiper.less -只有核心的Swiper样式

```bash
components/a11y/a11y.less -A11y模块所需的样式
components/controller/controller.less -控制器模块所需的样式
components/effect-coverflow/effect-coverflow.less -Coveflow效果模块所需的样式
components/effect-cube/effect-cube.less -多维数据集效果模块所需的样式
components/effect-fade/effect-fade.less -淡入淡出效果模块所需的样式
components/effect-flip/effect-flip.less -翻转效果模块所需的样式
components/lazy/lazy.less -懒惰模块所需的样式
components/navigation/navigation.less -导航模块所需的样式
components/pagination/pagination.less -分页模块所需的样式
components/scrollbar/scrollbar.less -滚动条模块所需的样式
components/thumbs/thumbs.less -Thumbs模块所需的样式
components/zoom/zoom.less -缩放模块所需的样式

SCSS样式
SCSS样式也是核心版本和模块的单独样式：

swiper.scss -只有核心的Swiper样式

```bash
components/a11y/a11y.scss -A11y模块所需的样式
components/controller/controller.scss -控制器模块所需的样式
components/effect-coverflow/effect-coverflow.scss -Coveflow效果模块所需的样式
components/effect-cube/effect-cube.scss -多维数据集效果模块所需的样式
components/effect-fade/effect-fade.scss -淡入淡出效果模块所需的样式
components/effect-flip/effect-flip.scss -翻转效果模块所需的样式
components/lazy/lazy.scss -懒惰模块所需的样式
components/navigation/navigation.scss -导航模块所需的样式
components/pagination/pagination.scss -分页模块所需的样式
components/scrollbar/scrollbar.scss -滚动条模块所需的样式
components/thumbs/thumbs.scss -Thumbs模块所需的样式
components/zoom/zoom.scss -缩放模块所需的样式

刷道具
SwiperReact组件接收所有Swiper参数作为组件道具，以及一些额外的道具：

支柱 类型 默认 描述
tag string ‘div’ Swiper主容器HTML元素标签
wrapperTag string ‘div’ 雨刷包装HTML元素标签
onSwiper (swiper) => void ‘div’ 接收Swiper实例的回调
此外，它支持所有组队，探索事件的on{Eventname}格式。例如slideChange事件变成onSlideChange道具：

<Swiper
onSlideChange={() => {/…/}}
onReachEnd={() => {/…/}}
…

SwiperSlide道具
支柱 类型 默认 描述
tag string ‘div’ 滑动幻灯片HTML元素标签
zoom boolean false 启用缩放模式所需的其他包装
virtualIndex number 实际的滑动滑条索引。需要为虚拟幻灯片设置
SwiperSlide渲染功能
SwiperSlide 组件可以接受渲染函数，该函数接收具有以下属性的对象：

isActive -当当前幻灯片处于活动状态时为true
isPrev -当前幻灯片是活动幻灯片中的前一个幻灯片时为true
isNext -当当前幻灯片是下一个活动幻灯片时为true
isVisible-当当前幻灯片可见时为true（watchSlidesVisibility必须启用Swiper参数）
isDuplicate-当当前幻灯片是重复幻灯片（loop启用模式）时为true，例如：

<Swiper>
  <SwiperSlide>
    {({ isActive }) => (
      <div>Current slide is {isActive ? 'active' : 'not active'}</div>
    )}
  </SwiperSlide>
</Swiper>

老虎机

Swiper React使用“插槽”进行内容分发。有4个可用插槽

container-start -元素将添加到swiper-container的开头
container-end （默认）-元素将添加到swiper-container的末尾
wrapper-start -元素将添加到swiper-wrapper的开头
wrapper-end -元素将添加到swiper-wrapper的末尾
例如：

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <span slot="container-start">Container Start</span>
  <span slot="container-end">Container End</span>
  <span slot="wrapper-start">Wrapper Start</span>
  <span slot="wrapper-end">Wrapper End</span>
</Swiper>

将呈现为：

<div class="swiper-container">
  <span slot="container-start">Container Start</span>
  <div class="swiper-wrapper">
    <span slot="wrapper-start">Wrapper Start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span slot="wrapper-end">Wrapper End</span>
  </div>
  <span slot="container-end">Container End</span>
</div>

虚拟幻灯片
这里的虚拟幻灯片渲染完全由React处理，除了设置virtual:true属性和virtualIndex幻灯片设置外，不需要任何其他操作：

import SwiperCore, { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// install Virtual module
SwiperCore.use([Virtual]);

export default () => {
  // Create array with 1000 slides
  const slides = Array.from({ length: 1000 }).map(
    (el, index) => `Slide ${index + 1}`
  );

  return (
    <Swiper spaceBetween={50} slidesPerView={3} virtual>
      {slides.map((slideContent, index) => {
        <SwiperSlide key={slideContent} virtualIndex={index}>
          {slideContent}
        </SwiperSlide>;
      })}
    </Swiper>
  );
};

控制器

控制器需要将一个Swiper实例传递给另一个：

  import React, { useState } from 'react';
  import SwiperCore, { Controller } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/react';

  // install Swiper's Controller component
  SwiperCore.use([Controller]);

  const App = () => {
    // store controlled swiper instance
    const [controlledSwiper, setControlledSwiper] = useState(null);

    return (
      <main>
        {/* Main Swiper -> pass controlled swiper instance */}
        <Swiper controller={{ control: controlledSwiper }} ...>
          {/* ... */}
        </Swiper>

        {/* Controlled Swiper -> store swiper instance */}
        <Swiper onSwiper={setControlledSwiper} ...>
          {/* ... */}
        </Swiper>
      </main>
    )
  }
对于双向控制（当两个Swipers彼此控制时），应如下所示：

import React, { useState } from 'react';
import SwiperCore, { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// install Swiper's Controller component
SwiperCore.use([Controller]);

const App = () => {
  // store swiper instances
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  return (
    <main>
      <Swiper onSwiper={setFirstSwiper} controller={{ control: secondSwiper }}>
        {/* ... */}
      </Swiper>

      <Swiper onSwiper={setSecondSwiper} controller={{ control: firstSwiper }}>
        {/* ... */}
      </Swiper>
    </main>
  );
};

拇指

与控制器相同，我们需要存储thumb实例并将其传递给主图库：

  import React, { useState } from 'react';
  import { Swiper, SwiperSlide } from 'swiper/react';
  import SwiperCore, { Thumbs } from 'swiper/core';

  // install Swiper's Thumbs component
  SwiperCore.use([Thumbs]);

  const App = () => {
    // store thumbs swiper instance
    const [thumbsSwiper, setThumbsSwiper] = useState(null);

    return (
      <main>
        {/* Main Swiper -> pass thumbs swiper instance */}
        <Swiper thumbs={{ swiper: thumbsSwiper }} ...>
          {/* ... */}
        </Swiper>

        {/* Thumbs Swiper -> store swiper instance */}
        {/* It is also required to set watchSlidesVisibility and watchSlidesProgress props */ }
        <Swiper
          onSwiper={setThumbsSwiper}
          watchSlidesVisibility
          watchSlidesProgress
          ...
        >
          {/* ... */}
        </Swiper>
      </main>
    )
  }

特效
可以使用以下效果：

• Fade
• Cube
• Overflow
• Flip
  要使用效果，您必须先导入和安装效果（与所有其他模块一样）（淡入淡出示例）：

import SwiperCore, { EffectFade } from 'swiper';
SwiperCore.use([EffectFade]);
您可以在此处找到运行效果演示。

完全淡入淡出效果示例
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectFade } from 'swiper';

import 'swiper/swiper.scss';
import 'swiper/components/effect-fade/effect-fade.scss';

SwiperCore.use([EffectFade]);

export default () => {
  return (
    <Swiper effect="fade">
      {[1, 2, 3].map((i, el) => {
        return <SwiperSlide>Slide {el}</SwiperSlide>;
      })}
    </Swiper>
  );
};