需要静心学习的PbootCMS模板制作教程（六）

CMS博客 2020-04-23 13:22 PbootCMS教程 2069

【野卡】2分钟拥有海外虚拟信用卡，畅享全球AI服务！

首页Banner轮播

首页的大图轮播，算是网站中的一道“硬菜”了。大图美不美观，直接影响整个网站的格局。

当然，这道“硬菜”的关键部分应该掌握在设计师手中，设计师就是这道菜的厨师，而写模板的只不过是端盘子的而已。

可是，职业不分贵贱，即便大厨烧出了美味的菜肴，服务员端菜的时候往里面加了只苍蝇，顾客也还是会反胃的。

所以，不要小看端盘子的，他也是整个流程中重要的一环。

制作轮播

回到正题，因为是模板制作教程，所以关于图片怎么轮播的部分就不展开讲了。各种素材站有很多炫酷的jQuery轮播插件，可以自行选择。

教程中将以swiper为例，来做一个简单的轮播。

swiper是一个强大的轮播插件，关于具体的一些使用方法，请自行参阅官方文档。

一、先将swiper的文件放置在文件夹中，并引入到模板文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>需要静心学习的PbootCMS模板制作教程（六）</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet">
</head>

<body>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
</html>

二、写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>

三、调用轮播图片

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是数量。

四、添加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后面。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>需要静心学习的PbootCMS模板制作教程（六）</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet">
</head>

<body>
<div id="Banner" class="swiper-container">
    <!-- 轮播主体 -->
    <div class="swiper-wrapper">
        {*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*}
    </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>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<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>
</html>

完成，剩下的就是CSS样式美化问题了。