Swiper 自动初始化封装 API 文档

基于 Swiper 8.4.7，通过给容器添加 data-swiper 属性自动初始化轮播组件，支持多种配置。

支持的 data- 配置属性列表

属性名 类型 默认值 说明 示例
data-Swiper-Open boolean all 对于3端是否选择开启可单写 pc, ipad, mo （没写就是默认3端开启） data-Swiper-Open="pc, ipad, mo"
data-loop boolean true 是否开启循环模式（无缝滚动） data-loop="true"
data-autoplay number (毫秒) | false false 自动播放间隔，单位毫秒。设置为0或不设置则关闭自动播放 data-autoplay="3000"
data-speed number 300 切换动画速度，单位毫秒 data-speed="500"
data-space-between number 20,15,10 slide 之间间距，单位px 格式为 "pc, ipad, mo" data-space-between="20,15,10"
data-centered-slides boolean false 是否启用居中模式(是否选择开启可单写 pc, ipad, mo) data-centered-slides="true"
data-pagination string | false bullets 分页器类型，支持 bullets, fraction, progressbar, 设置 false 关闭分页 data-pagination="bullets"
data-free-mode boolean false 是否开启自由滑动模式，无吸附效果 data-free-mode="true"
data-navigation boolean false 是否显示左右切换按钮 data-navigation="true"
data-slides-per-view number | auto 4 每页显示多少个 slide，支持数字或 auto data-slides-per-view="auto"
data-slides-per-group number 1 每次切换 slide 数量 data-slides-per-group="1"
data-breakpoints string (格式: "4,2,1") 4,2,1 响应式断点配置，格式为 "pc, ipad, mo" data-breakpoints="4,2,1"
data-direction string horizontal 滑动方向，horizontal或vertical data-direction="vertical"
data-effect string slide 切换效果，支持 slide, fade, cube, coverflow, flip data-effect="fade"
data-free-mode boolean false 是否开启自由滑动模式（无吸附） data-free-mode="true"
data-looped-slides number undefined loop 模式下的复制幻灯片数量 data-looped-slides="3"
data-touch-ratio number 1 触摸滑动灵敏度比例 data-touch-ratio="0.5"
data-thumbs 需手动初始化主轮播，示例中自动初始化了缩略图 false 关联缩略图 Swiper 选择器 #thumbs-container

使用示例

1. 基本用法

只需给容器添加 data-swiper 属性，其他可选配置可直接添加 data-* 属性：

<div data-swiper data-autoplay="3000" data-space-between="20" data-navigation="true" data-pagination="bullets" data-breakpoints="4,2,1">
  <div> data-swiper(初始化) </div>
  <div> data-autoplay(自动播放间隔，单位毫秒) </div>
  <div> data-space-between(slide 之间间距，单位 px) </div>
  <div> data-navigation(是否显示左右切换按钮) </div>
  <div> data-pagination(分页器类型:例如 。。。切换) </div>
  <div> data-breakpoints(响应式断点配置，格式为 "PC, iPad, 手机" 数字) </div>
</div>

2. 启用自动播放

<div data-swiper data-autoplay="2500">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

3. 启用缩略图同步

通过添加 data-thumb-for="#mainSwiperId" 属性，实现主轮播和缩略图同步（需手动初始化主轮播，示例中自动初始化了缩略图）

<!-- 主轮播 -->
<div id="mainSwiper" data-swiper data-slides-per-view="1" data-loop="true" data-pagination="bullets" data-navigation="true">
  <div>主幻灯片 1</div>
  <div>主幻灯片 2</div>
  <div>主幻灯片 3</div>
</div>

<!-- 缩略图 -->
<div data-swiper data-slides-per-view="4" data-loop="true" data-free-mode="true" data-watch-slides-progress="true" data-thumb-for="#mainSwiper">
  <div>缩略图 1</div>
  <div>缩略图 2</div>
  <div>缩略图 3</div>
  <div>缩略图 4</div>
</div>

<script>
  const mainSwiper = new Swiper('#mainSwiper', {
    loop: true,
    navigation: {
      nextEl: '#mainSwiper .swiper-button-next',
      prevEl: '#mainSwiper .swiper-button-prev',
    },
    pagination: {
      el: '#mainSwiper .swiper-pagination',
      clickable: true,
    },
  });

  const thumbSwiper = new Swiper('[data-thumb-for="#mainSwiper"]', {
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    loop: true,
  });

  mainSwiper.controller.control = thumbSwiper;
  thumbSwiper.controller.control = mainSwiper;
</script>

4. 启用无缝滚动（Loop）

<div data-swiper data-loop="true">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
</div>

注意：开启循环模式时，slide 数量建议大于 slidesPerView + loopedSlides，否则会自动关闭循环模式以避免错误。

已复制

COOKIES

我们的网站使用 cookie 和类似技术来个性化向您展示的广告，并帮助您在我们的网站上获得最佳体验。 欲了解更多信息，请参阅我们的隐私和 Cookie 政策

COOKIES

我们的网站使用 cookie 和类似技术来个性化向您展示的广告，并帮助您在我们的网站上获得最佳体验。 欲了解更多信息，请参阅我们的隐私和 Cookie 政策

这些 cookie 是支付等基本功能所必需的。 标准 cookie 无法关闭，也不会存储您的任何信息。

这些 cookie 收集信息，例如有多少人正在使用我们的网站或哪些页面受欢迎，以帮助我们改善客户体验。 关闭这些 cookie 将意味着我们无法收集信息来改善体验。

这些 cookie 使网站能够提供增强的功能和个性化。 它们可能由我们或我们已将其服务添加到我们页面的第三方提供商设置。 如果您不允许这些 cookie，那么部分或全部这些服务可能无法正常运行。

这些 cookie 帮助我们了解您感兴趣的内容，以便我们可以在其他网站上向您展示相关广告。 关闭这些 cookie 将意味着我们无法向您展示任何个性化广告。

中企跨境-全域组件 制作前进入CSS配置样式

Message：

联系电话：

WhatsApp：

E-mail：

在线客服添加返回顶部

启用全局默认滚动动画 (向上滚动)

右侧在线客服样式 1,2,3 1

图片alt标题设置： 记得修改：公司名称

表单验证提示文本： Content cannot be empty!

循环体没有内容时： Sorry,no matching items were found.

CSS / JS 文件放置地