ppypp伦理天堂,91手机在线视频,免费在线观看黄色毛片,夜夜穞天天穞狠狠穞AV美女按摩

采用swiper實現響應式輪播圖特效

第一步、安裝輪播圖插件

輪播圖插件：http://www.zbshanke.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

詳情請看輪播圖插件的調用方法文檔說明：http://www.zbshanke.com/doc/1111.html

這樣就成功實現輪播特效了，再根據自己情況修改樣式達到自己想要的效果。

打賞作者