采用swiper實(shí)現(xiàn)響應(yīng)式輪播圖特效
第一步、安裝輪播圖插件
輪播圖插件：http://www.apdwn.com/shop/719.html
下面以swiper7為例
第二步、下載swiper插件代碼
不同版本使用方法可能有差異，所以請(qǐng)下載swiper7，也可以直接下載這里提供的整理好的
將下載后解壓的 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"/>根據(jù)你的實(shí)際路徑做修改，確保模板中成功引用此文件即可。
2、模板底部</body>前添加
<script src="{HOME_THEME_PATH}js/swiper-bundle.min.js"></script>
<script>
//滾動(dòng)方案
var mySwiper = new Swiper ('.banner', {
loop: true, // 循環(huán)模式選項(xiàng)
autoplay: {
disableOnInteraction: false, //手動(dòng)滑動(dòng)之后不打斷播放
delay: 3000
},
// 如果需要分頁(yè)器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>基礎(chǔ)樣式
<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>
<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev hide"></div>
<div class="swiper-button-next hide"></div>
</div>說(shuō)明：
其中的
type=1 pid=0
就是輪播圖插件的分類(lèi)與父級(jí)ID
詳情請(qǐng)看輪播圖插件的調(diào)用方法文檔說(shuō)明：http://www.apdwn.com/doc/1111.html
這樣就成功實(shí)現(xiàn)輪播特效了，再根據(jù)自己情況修改樣式達(dá)到自己想要的效果。