帝國cms靈動標簽調用swiper幻燈片的方法及插件下載

在帝國cms中可以直接使用標簽[phomeflashpic]調用幻燈片，但是現在所有瀏覽器已經不支持flash了，但幻燈片幾乎在每個網站中都占著重要的位置，都是在首頁導航下出現，現在最流行的幻燈片是swiper，swiper還可以支持移動端手勢滑動

第一步，下載swiper幻燈片插件，放到skin目錄下，比如放到skin目錄下的banner目錄ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

第二步，在模板，首頁模板，添加樣式表以及html代碼：ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

①、在</header>之前，加入以下代碼：ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網
 ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

1. <script src="[!--news.url--]skin/banner/js/jquery-3.6.0.min.js"></script> 
2. <link rel="stylesheet" href="[!--news.url--]skin/banner/css/swiper.min.css"> 
3. <script src="[!--news.url--]skin/banner/js/swiper.min.js"></script> 
4. <script src="[!--news.url--]skin/banner/js/banner.js"></script> 

②、在首頁放幻燈片的位置，換上以下代碼：

1. <div class="banner"> 
2.     <div class="swiper-container"> 
3.       <div class="swiper-wrapper"> 
4.         <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div> 
5.         <div class="swiper-slide"><img src="/skin/banner/img/2.jpg"></div> 
6.       </div> 
7.       <div class="swiper-pagination"></div> 
8.       <div class="swiper-button-next"></div> 
9.       <div class="swiper-button-prev"></div> 
10.     </div> 
11. </div> 

注意：這一步 <div class="swiper-slide"><img src="/skin/banner/img/1.jpg"></div>是直接調用目錄img下的圖片，相當于是固定代碼，以后替換不方便。ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

如果換成帝國cms靈動標簽調用，通過后臺上傳和修改圖片會方便很多。ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

第一種方案，調用插件-廣告的圖片：ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網
 ZZW電腦_數碼_手機應用問題解決的IT技術網站 - 云狐網

1. <div class="banner"> 
2.     <div class="swiper-container"> 
3.       <div class="swiper-wrapper"> 
4. <!--調用廣告分類ID=1下的3條圖片--> 
5. [e:loop={"select picurl,url,adsay from {$dbtbpre}enewsad where classid=1 order by adid desc limit 3",0,24,0}] 
6. <a href="<?=$bqr[url]?>" target="_blank"><div class="swiper-slide"><img src="<?=$bqr[picurl]?>" alt="<?=$bqr[adsay]?>"></div></a> 
7. [/e:loop] 
8.       </div> 
9.       <div class="swiper-pagination"></div> 
10.       <div class="swiper-button-next"></div> 
11.       <div class="swiper-button-prev"></div> 
12.     </div> 
13. </div> 

第二種方案，調用新聞數據庫表的推薦信息的標題圖

1. <div class="banner"> 
2.     <div class="swiper-container"> 
3.       <div class="swiper-wrapper"> 
4. <!--調用news新聞信息下的5條信息，并且要有標題圖片才能顯示--> 
5. [e:loop={'news',5,20,1,0,0}] 
6.         <div class="swiper-slide"><a href="<?=$bqsr[titleurl]?>" target="_blank"><img src="<?=$bqr[titlepic]?>"></a></div> 
7. [/e:loop] 
8.       </div> 
9.       <div class="swiper-pagination"></div> 
10.       <div class="swiper-button-next"></div> 
11.       <div class="swiper-button-prev"></div> 
12.     </div> 
13. </div> 

方案一和方案二都是在帝國cms經常會用到的幻燈片調用方式。這兩種方式的調用，我建議從圖片大小來考慮，比如1920*600這種寬屏的大圖，建議用插件-廣告的方式上傳圖片，然后調用方案就用第一種。如果說網站類似于門戶新聞那種，第二種方案直接調用標題圖會更方便。