pbootcms 模板制作教程(六) - 手頁Banner輪播
手頁的大圖輪播，算是網(wǎng)站中的一道“硬菜”了。大圖美不美觀，直接影響整個網(wǎng)站的格局。
當然，這道“硬菜”的關鍵部分應該掌握在設計師手中，設計師就是這道菜的廚師，而寫模板的只不過是端盤子的而已。
可是，職業(yè)不分貴賤，即便大廚燒出了美味的菜肴，服務員端菜的時候往里面加了只蒼蠅，顧客也還是會反胃的。
所以，不要小看端盤子的，他也是整個流程中重要的一環(huán)。
回到正題，因為是模板制作教程，所以關于圖片怎么輪播的部分就不展開講了。各種素材站有很多炫酷的jQuery輪播插件，可以自行選擇。
教程中將以swiper為例，來做一個簡單的輪播。
swiper是一個強大的輪播插件，關于具體的一些使用方法，請自行參閱官方文檔。
一、先將swiper的文件放置在文件夾中，并引入到模板文件。
二、寫HTML結構
<div id="Banner" class="swiper-container"> <!-- 輪播主體 --> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> <img src="#" alt="#"> </a> </div> </div> <!-- 輪播控件 --> <div class="banner-prev"> <i class="fa fa-angle-left"></i> </div> <div class="banner-next"> <i class="fa fa-angle-right"></i> </div> </div>
三、調用輪播圖片
這里有兩個思路，使用PbootCMS自帶的輪播圖片模塊或者自建一個輪播模型。
1、使用PbootCMS自帶的幻燈片模塊
{pboot:slide gid=1 num=3}
<div class="swiper-slide">
<a href="[slide:link]">
<img src="[slide:src]" alt="[slide:title]">
</a>
</div>
{/pboot:slide}很簡單，使用{pboot:slide}標簽調用即可，其中gid是分組，num是數(shù)量。
自帶的輪播擴展內置了10個分組，有標題、副標題和鏈接地址，一般輪播夠用了。
2、自建一個輪播模型
這是本篇教程著重要講解的部分。
關于模型概念的理解，在使用PbootCMS制作模板的時候是非常重要的。
（1）、新建一個輪播模型
輸入模型名稱，模型類型選擇列表，模板留空，提交。輪播模型就建好了，是不是很簡單。
（2）、添加模型字段
這里可以自己添加需要在輪播中出現(xiàn)的一些元素，比如覆蓋在輪播圖片上的文字，點擊跳轉的鏈接等等，更高級一些甚至還可以添加一個表示當前輪播圖片的動畫效果的CSS名稱，讓不同的輪播圖用不同的動畫效果出現(xiàn)。（只要開動腦筋，PbootCMS的模型讓一切皆有可能）
（3）、添加輪播欄目
添加欄目的理由：
醉簡單的理由就是添加內容需要選擇欄目，不然不能添加。不過，仔細思考一下，一個網(wǎng)站的輪播很有可能不止在手頁頂部調用，比如一些側邊欄廣告輪播。那么這里的欄目就相當于默認輪播擴展中的分組，不同的是，這里的欄目是可以無限分組的，而且還可以根據(jù)欄目名稱知道這是顯示在哪里的輪播，方便管理。
（4）、接下來就可以添加輪播圖了
可以看到，剛才添加的字段“輪播文字”也在這里顯示了。
（5）、輪播圖調用
關于自建模型中輪播圖的調用，參考官網(wǎng)文檔：指定列表調用 即可。
四、添加swiper的js部分
<script>
var Banner = new Swiper ('#Banner', {
speed: 1500,
autoplay: {
delay: 5000,
},
loop: true,
//Pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
//Navigation
navigation: {
nextEl: '.banner-next',
prevEl: '.banner-prev',
},
})
</script>注意：代碼需要在swiper.min.js后面。
完成，剩下的就是CSS樣式美化問題了。
總結：輪播圖制作的時候主要就是調用思路。使用自帶的輪播擴展，可以直接添加調用；使用模型的方式，可以做一些更高級的定義。
