# Swiper Svelte Components组件

# 安装

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

npm install swiper

# 使用

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

 <Swiper
    spaceBetween={50}
    slidesPerView={3}
    on:slideChange={() => console.log('slide change')}
    on:swiper={(e) => console.log(e.detail[0])}
>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    ...
</Swiper>
<script>
    // Import Swiper Svelte components
    import { Swiper, SwiperSlide } from 'swiper/svelte';

    // Import Swiper styles
    import 'swiper/css';
</script>

注意

默认情况下，Swiper Svelte使用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 - 缩略图模块

 <Swiper
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    spaceBetween={50}
    slidesPerView={3}
    navigation
    pagination={{ clickable: true }}
    scrollbar={{ draggable: true }}
    on:slideChange={() => console.log('slide change')}
    on:swiper={(e) => console.log(e.detail[0])}
>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    ...
</Swiper>
<script>
    // import Swiper core and required modules
    import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

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

注意

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

# 样式

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
    slidesPerView="{3}"
    spaceBetween="{50}"
    navigation
    pagination
  ...
></Swiper>

# Swiper events事件

Swiper组件支持所有Swiper事件，包括尽快返回Swiper实例的附加Swiper事件。

注意

所有事件参数都将作为数组传递，可以在event.detail中访问。

比如：

 <Swiper
    on:swiper={onSwiper}
    on:slideChange={() => console.log('slide change')}
    on:progress={onProgress}
    >
    ...
  </Swiper>
  <script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';

    /* "progress" event emitted with "swiper" and "progress" argumentts */
    const onProgress = (e) => {
      const [swiper, progress] = e.detail;
      console.log(progress);
    }

    /* "swiper" event emitted with "swiper" instance argument */
    const onSwiper = (e) => {
      const [swiper] = e.detail;
      console.log(swiper);
    }
  </script>

# SwiperSlide props属性

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

# SwiperSlide slot数据

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

isActive - 当前幻灯片处于活动状态时为true
isPrev - 当前幻灯片是活动的上一张幻灯片时为true
isNext - 当前幻灯片是活动的下一张幻灯片时为真
isVisible - 当前幻灯片可见时为true（必须启用watchSlidesProgress Swiper参数）
isDuplicate - 例如，当当前幻灯片为重复幻灯片时（启用循环模式时），为true:

<Swiper>
    <SwiperSlide let:data="{{ isActive }}">
        <div>Current slide is { isActive ? 'active' : 'not active' }</div>
    </SwiperSlide>
</Swiper>

# Slots

Swiper Svelte使用“插槽”进行内容分发。有4个插槽可用 Swiper Vue。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

要实现虚拟幻灯片，我们需要：

将带有幻灯片的数组传递给Swiper的虚拟磁盘。幻灯片属性
基于virtualData插槽的数据渲染幻灯片。还必须通过virtualIndex。virtualData是具有以下属性的对象：
- offset - 以像素为单位滑动左/上偏移
- from- 需要渲染的第一张幻灯片的索引
- to- 需要渲染的最后一张幻灯片的索引
- slides - 要渲染的幻灯片

 <Swiper
    modules={[Virtual]}
    spaceBetween={50}
    slidesPerView={3}
    virtual={{ slides: virtualSlides }}
    let:virtualData={{ slides, offset, from }}
>
    {#each slides as slide, index (from + index)}
    <SwiperSlide
        virtualIndex={from + index}
        style={`left: ${offset}px`}
    >{slide}</SwiperSlide>
    {/each}
        </Swiper>
        <script>
        import { Virtual } from 'swiper';
        import { Swiper, SwiperSlide } from 'swiper/svelte';

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

# Controller控制器

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

   <!-- Main Swiper -> pass controlled swiper instance -->
<Swiper
    modules={[Controller]}
    controller={{ control: controlledSwiper }}
    ...
>
<!-- ... -->
</Swiper>

<!-- Controlled Swiper -> store swiper instance -->
<Swiper
    modules={[Controller]}
    on:swiper={setControlledSwiper}
    ...
>
<!-- ... -->
</Swiper>
<script>
    import { Controller } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/svelte';

    // store Controller swiper instance
    let controlledSwiper = null;

    const setControlledSwiper = (e) => {
    const [swiper] = e.detail;
    // set Controller swiper instance
    setTimeout(() => {
    controlledSwiper = swiper;
});
};
</script>

对于双向控制（当两个刷子相互控制时），应如下所示：

<Swiper
    modules={[Controller]}
    on:swiper={setFirstSwiper}
    controller={{ control: secondSwiper }}
    ...
>
<!-- ... -->
</Swiper>

<Swiper
    modules={[Controller]}
    on:swiper={setSecondSwiper}
    controller={{ control: firstSwiper }}
    ...
>
<!-- ... -->
</Swiper>
<script>
    import SwiperCore, { Controller } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/svelte';

    // store swiper instances
    let firstSwiper = null;
    let secondSwiper = null;

    const setFirstSwiper = (e) => {
    const [swiper] = e.detail;
    setTimeout(() => {
    firstSwiper = swiper;
});
};

    const setSecondSwiper = (e) => {
    const [swiper] = e.detail;
    setTimeout(() => {
    secondSwiper = swiper;
});
};
</script>

# Thumbs缩略图

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

<!-- 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
    on:swiper={setThumbsSwiper}
    ...
>
<!-- ... -->
</Swiper>

<script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    import SwiperCore, { Thumbs } from 'swiper';

    // store Thumbs swiper instance
    let thumbsSwiper = null;

    const setThumbsSwiper = (e) => {
    const [swiper] = e.detail;
    // set Thumbs swiper instance
    setTimeout(() => {
    thumbsSwiper = swiper;
});
};

</script>

# Effects特效

以下效果可用：

Fade
Cube
Coverflow
Flip
Cards
Creative

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

# 渐变效果示例

<Swiper modules="{[EffectFade]}" effect="fade">
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
<script>
    import { Swiper, SwiperSlide } from 'swiper/svelte';
    import { EffectFade } from 'swiper';

    import 'swiper/css';
    import 'swiper/css/effect-fade';
</script>