swiper 轮播

基于 Swiper 的轮播组件，提供 JS/CSS 资源加载以及可视化的代码生成工具。

加载资源

在模板中使用以下代码加载 JS 与 CSS（同一页面多次调用不会重复加载）：

{swiper:js()}
{swiper:css()}

可视化代码生成

在后台管理页面中，通过交互式界面调整参数并实时预览效果，一键生成可直接使用的 HTML + JS 代码。支持五种模式：

• 轮播：slide / fade / cube / coverflow / flip 效果
• 跑马灯：横向 / 竖向无缝滚动
• 3D 旋转木马：coverflow 效果
• 卡片堆叠：cards 效果
• 缩略图联动：主图与缩略图联动切换

自定义样式

通过 CSS 变量修改分页器与箭头颜色：

<style>
  .swiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
  }
</style>

更多 CSS 变量参考：分页 箭头

使用栏目变量实现简单的轮播功能

1. 在栏目模型中添加变量 多图 标识为:"pics" 类型为"图片上传"
2. 保存后,配置变量,开启"多图"选项
3. 在栏目设置中,上传多张图片
4. 修改模板文件,添加以下代码

{swiper:js()}
{swiper:css()}

<!-- 轮播:HTML结构 -->
<div id="swiper1" class="swiper">
    <div class="swiper-wrapper">
    {$pics=explode(;,$.pics)|array_filter()}
    {loop $pics as $thispic}
        <div class="swiper-slide"><img src="{$thispic}" style="width:100%;"></div>
    {/loop}
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<!-- JS代码 -->
<script>
new Swiper("#swiper1",{ "loop": true, "speed": 600, "effect": "slide", "autoplay": { "delay": 3000, "disableOnInteraction": false, "pauseOnMouseEnter": true }, "pagination": { "el": ".swiper-pagination" }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "scrollbar": false });
</script>

如需更完善的图片管理功能,如需要图片标题,介绍等,可以添加banner模型实现多图功能

同一页面存在多个 Swiper 实例时会互相干扰,请改 ID 或限定容器范围，避免冲突。