采用swiper实现响应式轮播图特效

第一步、安装轮播图插件

轮播图插件：https://www.xunruicms.com/shop/719.html

下面以swiper7为例

第二步、下载swiper插件代码

不同版本使用方法可能有差异，所以请下载swiper7，也可以直接下载这里提供的整理好的

swiper.zip

将下载后解压的 js与css放在你的模板样式目录下，比如 default 模板目录

/static/default/css/swiper-bundle.min.css

/static/default/css/swiper-bundle.min.js

第三步、模板安装

1、模板</head>前添加

<link rel="stylesheet" type="text/css" href="{HOME_THEME_PATH}css/swiper-bundle.min.css"/>

根据你的实际路径做修改，确保模板中成功引用此文件即可。

2、模板底部</body>前添加

<script src="{HOME_THEME_PATH}js/swiper-bundle.min.js"></script>
<script>
    //滚动方案
    var mySwiper = new Swiper ('.banner', {
        loop: true, // 循环模式选项
        autoplay: {
            disableOnInteraction: false, //手动滑动之后不打断播放
            delay: 3000
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })
</script>

基础样式

<style>
    .banner {position: relative; overflow: hidden}
    .banner .swiper-slide img {width: 100%; display: block;}
</style>

3、轮播图代码

<div class="swiper-container banner">
    <div class="swiper-wrapper">
        {table table_site=carousel type=1 pid=0 show=1 num=10}
        <div class="swiper-slide">
            <a href="{$t.url}" target="_blank"><img class="" src="{dr_get_file($t.thumb)}"></a>
        </div>
        {/table}
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev hide"></div>
    <div class="swiper-button-next hide"></div>
</div>

说明：

其中的 

type=1 pid=0

就是轮播图插件的分类与父级ID

详情请看轮播图插件的调用方法文档说明：https://www.xunruicms.com/doc/1111.html

这样就成功实现轮播特效了，再根据自己情况修改样式达到自己想要的效果。

打赏作者