ECSHOP 一個頁面使用多個輪播_Ecshop 綜合文章_ECSHOP 相關文章與模板

除了頁首主廣告可以用輪播之外，有時因為版面或圖片太多占空間，導致布局極為不易，這時候可以考慮用輪播來縮小空間占用，因為輪播只須給他一個寬度，就會自動隱藏多出來的部分再輪流捲動顯示，可以讓頁面布局更容易且整齊，也支援手機的手指左右拖動...

用 OwlCarousel2 這個輪播插件有極為方便的設定，若要一個頁面使用多個輪播請參考以下作法:

1、首先下載最新版本 OwlCarousel2 輪播插件，並在使用輪播的頁面<head>內引用如下必要文件，OwlCarousel2 是依賴jquery的，所以要同時引入jquery庫...

<link href="{$public}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$public}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="{$public}js/owl.carousel.min.js"></script>

2、其中的{$public}是指定模板資源的資料夾(模板目錄/public/*)，用來放置模板用到的CSS、JS、圖片或其他插件檔案，可以在 includes/lib_main.php 約 1676 行找到 $smarty->assign('searchkeywords', $searchkeywords); 之後加入：

$smarty->assign('public', 'themes/' . $GLOBALS['_CFG']['template'] . '/public/');

3、recommend_new.lbi、recommend_hot.lbi、recommend_best.lbi 代碼內容大同小異，只需修改紅字部分符合頁面，['<i class="bi bi-caret-left-fill"></i>','<i class="bi bi-caret-right-fill"></i>'] 調用了bootstrap icon作為上一張與下一張箭頭圖示，你也可以直接改為文字顯示，如:['上一張','下一張']

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $new_goods} -->
<div id="new_area" class="new-carousel carousel">
	<!--{foreach from=$new_goods item=goods name=new_goods}-->
	<div class="item transition">
		<a href="{if $goods.original}{$goods.original}{else}{$goods.thumb}{/if}" data-fancybox="new" data-caption="{$goods.name|escape:html}">
			<img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="img" />
		</a>
		<div class="info text-start">
			<div class="name text-overflows text-overflow2">
				<a href="{$goods.url}" title="{$goods.name|escape:html}">
					{$goods.short_name|escape:html}
				</a>
			</div>
			<div class="price text-end">
				<del class="float-start">{$goods.market_price}</del>
				<!-- {if $goods.promote_price neq ""} -->
				{$lang.promote_price}<em>{$goods.promote_price}</em>
				<!-- {else}-->
				{$lang.shop_price}：<em>{$goods.shop_price}</em>
				<!--{/if}-->
			</div>
			<div class="sales">
				{$lang.sales}：<span class="text-danger">{$goods.cum_sales}</span>
				<a href="{$goods.url}" class="btn btn-outline-danger btn-sm float-end">
					<i class="bi bi-eye-fill"></i>{$lang.detail}
				</a>
			</div>
			<a href="javascript:addToCart({$goods.id})" class="btn btn-outline-success mt-2 w-100"><i class="bi bi-cart-plus-fill"></i>{$lang.add_to_cart}</a>
		</div>
	</div>
	<!--{/foreach}-->
</div>
<script type="text/javascript">
	$(window).load(function() {
		// 輪播設定
		$(".new-carousel").owlCarousel({
			loop: true, // 是否無限循環
			margin: 10, // 與右邊圖片的距離
			nav: true, // 導航文字
			autoplay:true, // 自動輪播
			autoplayTimeout: 3000, // 切換時間
			smartSpeed: 500, //換圖速度
			autoplayHoverPause: true, // 滑鼠經過時暫停
			navText : ['<i class="bi bi-caret-left-fill"></i>','<i class="bi bi-caret-right-fill"></i>'], 	//HTML導航箭頭
			dots: false, 	//顯示圓點導航按鈕
			responsive:{
				0:{
					items:1
				},
				540:{
					items:2
				},
				992:{
					items:3
				},
				1200:{
					items:4
				}
			}
		});
		var news = $(".new-carousel").height();
		var prev = $(".owl-prev").height();
		$(".owl-prev, .owl-next").css("top", (news-prev)/2);
	});
</script>
<a href="../search.php?intro=new" class="index_more btn btn-danger">
	{$lang.more}{$lang.new}<i class="bi bi-chevron-double-right bi-left"></i>
</a>
<!-- {/if} -->

4、cat_goods.lbi 是分類商品，代碼如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div id="goods_cat{$goods_cat.id}" class="cat_title">
	<span>{$goods_cat.name|escape:html}</span>
	<a href="{$goods_cat.url}" class="more">
		{$lang.more}<i class="bi bi-chevron-double-right bi-left"></i>
	</a>
</div>
<div class="cat-carousel carousel">
<!-- {foreach from=$cat_goods item=goods} -->
	<div class="item transition">
		<a href="{if $goods.original}{$goods.original}{else}{$goods.thumb}{/if}" data-fancybox="cat_goods{$goods_cat.id}" data-caption="{$goods.name|escape:html}">
			<img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="img" />
		</a>
		<div class="info text-start">
			<div class="name text-overflows text-overflow2">
				<a href="{$goods.url}" title="{$goods.name|escape:html}">
					{$goods.short_name|escape:html}
					<!-- {if $goods.brief} -->
					<em class="brief">{$goods.brief}</em>
					<!--{/if}-->
				</a>
			</div>
			<div class="price text-end">
				<del class="float-start">{$goods.market_price}</del>
				<!-- {if $goods.promote_price neq ""} -->
				{$lang.promote_price}<em>{$goods.promote_price}</em>
				<!-- {else}-->
				{$lang.shop_price}：<em>{$goods.shop_price}</em>
				<!--{/if}-->
			</div>
			<div class="sales">
				{$lang.sales}：<span class="text-danger">{$goods.cum_sales}</span>
				<a href="{$goods.url}" class="btn btn-outline-danger btn-sm float-end">
					<i class="bi bi-eye-fill"></i>{$lang.detail}
				</a>
			</div>
			<a href="javascript:addToCart({$goods.id})" class="btn btn-outline-success mt-2 w-100">
				<i class="bi bi-cart-plus-fill"></i>{$lang.add_to_cart}</a>
		</div>
	</div>
<!--{/foreach}-->
</div>
<script type="text/javascript">
	$(window).load(function() {
		// 輪播設定
		$(".cat-carousel").owlCarousel({
			loop: true, // 是否無限循環
			margin: 10, // 與右邊圖片的距離
			nav: true, // 導航文字
			autoplay:true, // 自動輪播
			autoplayTimeout: 3000, // 切換時間
			smartSpeed: 500, //換圖速度
			autoplayHoverPause: true, // 滑鼠經過時暫停
			navText : ['<i class="bi bi-caret-left-fill"></i>','<i class="bi bi-caret-right-fill"></i>'], 	//HTML導航箭頭
			dots: false, 	//顯示圓點導航按鈕
			responsive:{
				0:{
					items:1
				},
				540:{
					items:2
				},
				992:{
					items:3
				},
				1200:{
					items:4
				}
			}
		});
		var cat = $(".cat-carousel").height();
		var prev = $(".owl-prev").height();
		$(".owl-prev, .owl-next").css("top", (cat-prev)/2);
	});
</script>

DEMO

如果你對ECSHOP 一個頁面使用多個輪播有任何問題請到討論區發帖。

最新 ecshop 4.1.8 線上購物系統原始碼免費下載

ECSHOP 響應式模板使用PHP