首頁的大圖輪播，算是網站中的一道“硬菜”了。大圖美不美觀，直接影響整個網站的格局。

當然，這道“硬菜”的關鍵部分應該掌握在設計師手中，設計師就是這道菜的廚師，而寫模板的只不過是端盤子的而已。

可是，職業不分貴賤，即便大廚燒出了美味的菜肴，服務員端菜的時候往里面加了只蒼蠅，顧客也還是會反胃的。

所以，不要小看端盤子的，他也是整個流程中重要的一環。

回到正題，因為是模板制作教程，所以關于圖片怎么輪播的部分就不展開講了。各種素材站有很多炫酷的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是數量。

自帶的輪播擴展內置了10個分組，有標題、副標題和鏈接地址，一般輪播夠用了。

2、自建一個輪播模型

這是本篇教程著重要講解的部分。

關于模型概念的理解，在使用PbootCMS制作模板的時候是非常重要的。

（1）、新建一個輪播模型

輸入模型名稱，模型類型選擇列表，模板留空，提交。輪播模型就建好了，是不是很簡單。

（2）、添加模型字段

這里可以自己添加需要在輪播中出現的一些元素，比如覆蓋在輪播圖片上的文字，點擊跳轉的鏈接等等，更高級一些甚至還可以添加一個表示當前輪播圖片的動畫效果的CSS名稱，讓不同的輪播圖用不同的動畫效果出現。（只要開動腦筋，PbootCMS的模型讓一切皆有可能）

（3）、添加輪播欄目

添加欄目的理由：

最簡單的理由就是添加內容需要選擇欄目，不然不能添加。不過，仔細思考一下，一個網站的輪播很有可能不止在首頁頂部調用，比如一些側邊欄廣告輪播。那么這里的欄目就相當于默認輪播擴展中的分組，不同的是，這里的欄目是可以無限分組的，而且還可以根據欄目名稱知道這是顯示在哪里的輪播，方便管理。

（4）、接下來就可以添加輪播圖了

可以看到，剛才添加的字段“輪播文字”也在這里顯示了。

（5）、輪播圖調用

關于自建模型中輪播圖的調用，參考官網文檔：指定列表調用 即可。

四、添加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樣式美化問題了。

總結：輪播圖制作的時候主要就是調用思路。使用自帶的輪播擴展，可以直接添加調用；使用模型的方式，可以做一些更高級的定義。

文章來源：https://www.timoo.net/content/76.html