
呆错文章管理系统首页幻灯片、头条轮播图调用实例与配置
人气:318 更新:2023-01-07
轮播数据设置
文章>文章管理>添加/修改文章,上传头条封面并勾选文章的头条属性。
模板调用实例
- limit 为轮播数量,根据需要修改模板
- sort 排序字段为info_id
- data-interval 为轮播频率(毫秒),这里是3秒
{assign name="slide" value=":cmsSelect([
'field' => 'info_name,info_slug,info_action',
'with' => 'term,info_meta',
'status' => 'normal',
'limit' => 6,
'sort' => 'info_id',
'order' => 'desc',
'meta_key' => 'cms_head',
'meta_value' => '1'
])"}
{if $slide}
<div class="carousel slide" id="dcSlide" data-ride="carousel">
<ol class="carousel-indicators">
{volist name="slide" id="cms"}
<li data-target="#dcSlide" data-slide-to="{$key}" {eq name="key" value="0"}class="active"{/eq}></li>
{/volist}
</ol>
<div class="carousel-inner">
{volist name="slide" id="cms"}
<div class="carousel-item {eq name="key" value="0"}active{/eq}" data-interval="3000">
<a class="text-light text-center" href="{:cmsUrlDetail($cms)}">
<p class="w-100 slide-text">{$cms.info_name|DcSubstr=0,32,false}</p>
<img class="w-100 slide-height" src="{:cmsUrlImage($cms['cms_slide'],$path_root)}" alt="{$cms.info_name|DcHtml}">
</a>
</div>
{/volist}
</div>
<a class="carousel-control-prev" href="#dcSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#dcSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{/if}