# Swiper SolidJS Components组件

# 安装

Swiper SolidJS插件仅作为主Swiper库的一部分通过NPM安装:

npm install swiper

# 使用

swiper/solid exports 2个组件:swiper和SwiperSlide:

// Import Swiper SolidJS components
import { Swiper, SwiperSlide } from 'swiper/solid';

// Import Swiper styles
import 'swiper/css';

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 SolidJS使用Swiper的核心版本(没有任何附加模块)。如果要使用导航、分页和其他模块,必须先安装它们。以下是其他模块导入列表:

  • Virtual - 虚拟幻灯片模块
  • Keyboard - 键盘控制模块
  • Mousewheel - 鼠标滚动模块
  • Navigation - 导航模块
  • Pagination - 分布模块
  • Scrollbar - 滚动条模块
  • Parallax - 视差模块
  • FreeMode - 自由模式模块
  • Grid - 网格模块
  • Manipulation - 幻灯片操作模块(仅适用于核心版本)
  • Zoom - 放大模块
  • Lazy - 懒加载模块
  • Controller - 控制模块
  • A11y - 可达性控制模块
  • History - 历史导航模块
  • HashNavigation - Hash导航模块
  • Autoplay - 自动播放模块
  • EffectFade - 渐变特效模块
  • EffectCube - 立体特效模块
  • EffectFlip - 轻弹特效模块
  • EffectCoverflow - Coverflow Effect module
  • EffectCards - 卡片特效模块
  • EffectCreative - 创新特效模块
  • Thumbs - 缩略图模块
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      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>
  );
};

注意

如果您传递这些参数而不指定其元素(例如,不使用Navigation.nextEl、Pagination.el等),Swiper SolidJS组件将创建导航、分页和滚动条所需的元素

# 样式

Swiper包含不同的css,less和scss样式:

  • swiper/css - 只包含Swiper核心样式
  • swiper/css/bundle - 所有Swiper模块样式(比如导航,分页样式等.)

模块样式 (如果已经导入了bundle样式,则不需要此选项):

  • swiper/css/a11y - A11y模块样式
  • swiper/css/autoplay - Autoplay自动播放模块样式
  • swiper/css/controller - Controller控制模块样式
  • swiper/css/effect-cards - Cards Effect卡片特效模块样式
  • swiper/css/effect-coverflow - Coverflow Effect覆盖流特效模块样式
  • swiper/css/effect-creative - Creative Effect创意特效模块样式
  • swiper/css/effect-cube - Cube Effect立体特效模块样式
  • swiper/css/effect-fade - Fade Effect渐变模块样式
  • swiper/css/effect-flip - Flip Effect翻转模块样式
  • swiper/css/free-mode - Free自由模块样式
  • swiper/css/grid - Grid网格模块样式
  • swiper/css/hash-navigation - Hash Navigation哈斯导航模块样式
  • swiper/css/history - History module历史模块样式
  • swiper/css/keyboard - Keyboard键盘模块样式
  • swiper/css/lazy - Lazy懒加载模块样式
  • swiper/css/manipulation - Manipulation操作模块样式
  • swiper/css/mousewheel - Mousewheel鼠标滚动样式
  • swiper/css/navigation - Navigation导航模块样式
  • swiper/css/pagination - Pagination分页模块样式
  • swiper/css/parallax - Parallax视差模块样式
  • swiper/css/scrollbar - Scrollbar滚动条样式
  • swiper/css/thumbs - Thumbs缩略图模式
  • swiper/css/virtual - Virtual虚拟模块样式
  • swiper/css/zoom - Zoom放大模块样式

对于Less的样式,将css替换,例如:

import 'swiper/less';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

对于SCSS的样式,将css替换,例如:

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

# Swiper props

Prop 类型 默认 描述
tag string 'div' Swiper幻灯片HTML元素
wrapperTag string 'div' Swiper wrapper HTML元素
onSwiper (swiper) => void 'div' 接收Swiper实例的回调

它还支持{Eventname}格式的所有Swiper事件。例如,slideChange事件变为OnSliderChange属性:

 <Swiper
    onSlideChange={() => {/*...*/}}
    onReachEnd={() => {/*...*/}}
    ...
  >

# SwiperSlide props属性

Prop 类型 默认 描述
tag string 'div' Swiper幻灯片HTML元素
zoom boolean false 启用缩放模式所需的wrapper容器
virtualIndex number 实际滑动指数。需要为虚拟幻灯片设置

# SwiperSlide渲染函数

SwiperSlide组件可以接受接收具有以下属性的对象的渲染函数:

  • isActive - 当前幻灯片处于活动状态时为true
  • isPrev - 当前幻灯片是活动的上一张幻灯片时为true
  • isNext - 当前幻灯片是活动的下一张幻灯片时为真
  • isVisible - 当前幻灯片可见时为true(必须启用watchSlidesProgress Swiper参数)
  • isDuplicate - 例如,当当前幻灯片为重复幻灯片时(启用循环模式时),为true:
<Swiper>
  <SwiperSlide>
    {({ isActive }) => (
      <div>Current slide is {isActive ? 'active' : 'not active'}</div>
    )}
  </SwiperSlide>
</Swiper>

# useSwiper

Swiper SolidJS提供了useSwiper钩子,可轻松获取Swiper内部组件中的Swiper实例:

// some-inner-component.jsx
import { useSwiper } from 'swiper/solid';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

# useSwiperSlide

useSwiperSlide是Swiper幻灯片内部组件获取幻灯片数据的另一个钩子(与SwiperSlid渲染函数中的数据相同)

// some-inner-component.jsx
import { useSwiperSlide } from 'swiper/solid';

export default function SlideTitle() {
  const swiperSlide = useSwiperSlide();

  return (
    <p>Current slide is {swiperSlide.isActive ? 'active' : 'not active'}</p>
  );
}

#

Swiper SolidJS 。js组件使用“插槽”进行内容分发。有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">
  <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>

# Virtual Slides

此处的虚拟幻灯片渲染完全由React处理,除了设置Virtual:true属性和在幻灯片上设置virtualIndex之外,无需任何其他操作:

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

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/virtual';

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

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

# Controller控制器

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

 import { createSignal } from 'solid';
  import { Controller } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/solid';

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

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

        {/* Controlled Swiper -> store swiper instance */}
        <Swiper modules={[Controller]} onSwiper={setControlledSwiper} ...>
          {/* ... */}
        </Swiper>
      </main>
    )
  }

对于双向控制(当两个刷子相互控制时),应如下所示:

import { createSignal } from 'solid';
import { Controller } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/solid';

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

  return (
    <main>
      <Swiper
        modules={[Controller]}
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper() }}
      >
        {/* ... */}
      </Swiper>

      <Swiper
        modules={[Controller]}
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper() }}
      >
        {/* ... */}
      </Swiper>
    </main>
  );
};

# Thumbs缩略图

与控制器相同,我们需要存储thumbs实例并将其传递到主库:

import { createSignal } from 'solid';
  import { Swiper, SwiperSlide } from 'swiper/solid';
  import { Thumbs } from 'swiper';

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

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

        {/* Thumbs Swiper -> store swiper instance */}
        {/* It is also required to set watchSlidesProgress prop */ }
        <Swiper
          modules={[Thumbs]}
          watchSlidesProgress
          onSwiper={setThumbsSwiper}
          ...
        >
          {/* ... */}
        </Swiper>
      </main>
    )
  }

# Effects特效

以下效果可用:

  • Fade
  • Cube
  • Coverflow
  • Flip
  • Cards
  • Creative

要使用效果,您必须先导入并安装它们(与所有其他模块一样)。

# 渐变效果示例

import { Swiper, SwiperSlide } from 'swiper/solid';
import { EffectFade } from 'swiper';

import 'swiper/css';
import 'swiper/css/effect-fade';

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