作者 主題: 25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告  (閱讀 696 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
25、ECSHOP + Bootstrap3 製作多圖滾動首頁主廣告
« 於: 七月 22, 2019, 11:15:18 下午 »
使用依賴 jquery 的 owl.carousel 插件為網站的首頁主廣告,特點是可以多圖展示並輪播,使用不同寬度的圖片或視頻也不會變形,因為圖片不需太大,可加快手機載入速度,你也可以調用網站的促銷商品...
index.dwt :
代碼: [選擇]
<link href="{$tpl}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$tpl}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$tpl}js/owl.carousel.min.js"></script>
    <div class="owl-carousel">
      <!--{foreach from=get_flash_xml() item=playerdb name=get_flash_xml}-->
      <div class="item">
      <a href="{$playerdb.url}" title="{$playerdb.text}">[img]https://we-shop.net{$playerdb.src}" /></a>
    </div>
      <!--{/foreach}-->
    </div>
<style type="text/css">
    .owl-dots {
        text-align: right;
    }
</style>
<script type="text/javascript">
    $(".owl-carousel").owlCarousel({
        items: 3, // 一次顯示幾個項目
        loop: true, // 是否無限循環
        margin: 10, // 與右邊圖片的距離
        nav: false, // 導航文字
        autoplay: true, // 自動輪播
        autoplayTimeout: 1000, // 切換時間
        autoplayHoverPause: true, // 滑鼠經過時暫停
        dots: true,     //顯示圓點導航按鈕
        smartSpeed: 800, //換圖速度
    });
    </script>



LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php