幻燈片相關的標簽有兩個,`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整出絢麗的幻燈片。