一、安装好插件

https://www.xunruicms.com/shop/app/719.html

二、后台应用--》轮播图管理

1、添加轮播图分类

默认的2个轮播图分类也可以修改名称

2、添加轮播图片

三、前端调用

使用“任意表循环”来调用

文档：https://www.xunruicms.com/doc/426.html

调用示例1：

调用ID为1分类下的轮播图10条

{table table_site=carousel type=1 num=10}
<a target="_blank" href="{$t.url}"{if $t.target==1} target="_blank"{/if}><img src="{dr_get_file($t.thumb)}" alt="{$t.title}"></a>
{/table}

调用示例2：

调用ID为1分类下轮播图ID为2的下级轮播图10条

{table table_site=carousel type=1 pid=2 num=10}
<a target="_blank" href="{$t.url}"{if $t.target==1} target="_blank"{/if}><img src="{dr_get_file($t.thumb)}" alt="{$t.title}"></a>
{/table}

调用示例3：

判断是图片还是视频

{if $t.leixing=='image'}
<a{if $t.url} target="_blank" href="{$t.url}" target="_blank"{/if}>
    <img src="{dr_get_file($t.thumb)}" class="d-block w-100" alt="{$t.title}">
</a>
{elseif $t.leixing=='video'}
<video width="100%" height="auto" autoplay muted loop>
    <source src="{dr_get_file($t.thumb)}" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
{/if}

四、API接口调用

API接口调用轮播图，可以在【API接口】插件中添加“API接口数据来实现”，下面给个示例

1、API接口数据页面，添加，

{table table_site=carousel type=2 show=1 order=displayorder_asc num=10}
{api::id=$t.id}
{api::name=$t.name}
{api::title=$t.title}
{api::thumb=dr_thumb($t.thumb)}
{/table}

2、点击右边的 接口测试，如果显示数据，就正常了，如果没显示数据，检查上一步的type是否正确

小白免费福利

轮播图特效实例完整分享

https://www.xunruicms.com/book/9/92.html