幻灯片相关的标签有两个,`slides`和 `noslides` ## slides标签 这个标签其实就一个循环标签,只是会把你指定的幻灯片数据获取出来 | 标签名 | 作用 | 包含属性 | | --- | --- | --- | | slides | 生成幻灯片 |id,item | 标签属性: | 标签属性名 | 含义 | | --- | --- | | id |后台幻灯片 id,必须 | | item |循环变量名,默认为 vo | ## noslides标签 | 标签名 | 作用 | 包含属性 | | --- | --- | --- | | noslides | 判断有没有幻灯片 |id,item | 标签属性: | 标签属性名 | 含义 | | --- | --- | | id |后台幻灯片 id,必须 | 幻灯片插件有很多，一般不会自己写，当然大神你要自己写估计也不需要看我这个文档了 cmf官方用了slippry，本人比较喜欢用responsiveslides和flickity 下面我将flickity做个demo，如何在模板上实现幻灯片 flickity是一个jq的slider插件，具体参数，api等自行百度。 具体实现代码看下图  下图为实现效果  ## slides标签生成幻灯片用法 ``` <slides id="1"> <div class="carousel-cell"> <a href="{$vo.url}" target="_blank"> <img src="{:cmf_get_image_url($vo['image'])}" data-flickity-lazyload="{:cmf_get_image_url($vo['image'])}" alt="{$vo.title}"> </a> <div class="slides-title text-center"> <h2>{$vo.title}</h2> <p> {$vo.content}</p> </div> </div> </slides> ``` ## 生成幻灯片,如果没有幻灯片并提示 ``` <ul id="home-slider" class="list-unstyled"> <slides id="1"> <li> <div class="caption-wraper"> <div class="caption">{$vo.name|default=''}</div> </div> <a href=""><img src="{:cmf_get_image_url($vo['image'])}" alt=""></a> </li> </slides> <noslides id="1"> <li>你还没有创建幻灯片;</li> </noslides> </ul> ``` * * * * * 个人喜欢的优秀幻灯片插件推荐 1、slippry 官方网站：http://slippry.com/ CMF官方使用 2、flickity， 官方网站：https://flickity.metafizzy.co/ 本人用的最多，支持手机触摸 3、swiper 官方网站：http://www.swiper.com.cn/ 国产神器，很不错 4、responsiveslides 官方网站：http://responsiveslides.com/ 小巧，灵活，手机支持上略欠缺，适合自定义度高的幻灯片，可以结合animate整出绚丽的幻灯片。