除此之外，OwlCarousel2是一個不錯的圖片輪播JS外掛，完整自適應版面(RWD)、支援多種特殊輪播模式(例如由右到左、不同尺寸圖片輪播、滑鼠拖拉效果…等)、可一次輪播數張圖片、Youtube 影片、動畫、可自訂循環輪播、輪播時間、速度、免費，並可商業使用...
一、官網下載 OwlCarousel2
二、這個外掛需要依賴jquery，而ecshop的transport.js確與jquery衝突，因此你的ecshop若不支援jquery，首頁就不能載入transport.js，否則無法正常顯示...以ecshop為例，請將index_ad.lbi內容清空並重新編輯：
<link href="{$themes}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$themes}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$themes}js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="{$themes}js/owl.carousel.min.js"></script>
{$themes}是目前的模板目錄三、接下來設定輪播選項，每次只顯示一張，若是想每次顯示三張只需將 items: 1 改成 items: 3 即可
<script type="text/javascript">
$(window).load(function() {
$(".owl-carousel").owlCarousel({
loop: true,/*是否循環*/
margin: 10,
autoplay: true,/*是否自動播放*/
autoplayTimeout: 3000,/*換圖間隔*/
autoplayHoverPause: true,/*滑鼠經過是否暫停*/
nav: true, // 顯示導航文字
navText : ['上一張','下一張'],// 顯示導航文字
dots: false, //顯示圓點導航按鈕
smartSpeed: 800,/*換圖速度*/
items: 1//每次顯示一張
});
});
</script>
四、如果將上面的 items: 1 換成下方的代碼，可以讓OwlCarousel2根據設備的寬度顯示不同張數，以下方為例，0~600px顯示一張，600px~1200px顯示兩張，1200px以上則顯示三張，這樣做的好處可以讓圖片以最小尺寸顯示，不必考慮大小螢幕問題...
responsive:{
0:{
items:1
},
600:{
items:2
},
1200:{
items:3
}
}
五、加入要輪播的圖片，ecshop是跑smarty迴圈的，所以會像這樣
<div class="owl-carousel">
<!--{foreach from=$focus item=playerdb name=get_flash_xml}-->
<div class="item">
<a href="{$playerdb.url}" title="{$playerdb.text}"><img src="{$playerdb.src}" /></a>
</div>
<!--{/foreach}-->
</div>
六、最後在 index.php 最後加入底下函數才能順利讀取輪播列表，如果沒有意外應該能正常顯示輪播圖片了
if (!function_exists('get_focus')){
//首頁主廣告
function get_focus(){
$flashdb = array();
if (file_exists(ROOT_PATH . DATA_DIR . '/flash_data.xml')) {
if (!preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"\ssort="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER)) {
preg_match_all('/item_url="([^"]+)"\slink="([^"]+)"\stext="([^"]*)"/', file_get_contents(ROOT_PATH . DATA_DIR . '/flash_data.xml'), $t, PREG_SET_ORDER);
}
if (!empty($t)) {
foreach ($t as $key => $val) {
$val[4] = isset($val[4]) ? $val[4] : 0;
$flashdb[] = array('src'=>$val[1],'url'=>$val[2],'text'=>$val[3],'sort'=>$val[4]);
}
}
}
return $flashdb;
}
}
$GLOBALS['smarty']->assign("focus",get_focus());
