腾讯云优惠券

呆错文章管理系统首页幻灯片、头条轮播图调用实例与配置

人气:31 更新: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}