QDM 雲端開店平台

「自訂頁面用 - 自訂輪播圖/影片」

• 可依不同頁面，設計專屬輪播圖呈現優惠、熱銷品、品牌主張，吸引目光、聚焦重點

• 輪播圖具備節奏與節點，可輪流呈現多項訊息，提升頁面活性與用戶停留時間

✎ 重點拆解：

一、「自訂頁面用 - 自訂輪播圖/影片」設定路徑

二、「自訂頁面用 - 自訂輪播圖/影片」語法

▪︎ 輪播圖片

▪︎ 輪播影片

一、「自訂頁面用 - 自訂輪播圖/影片」設定路徑

設定路徑：版面 > 自訂頁面。

設定頁面中，點擊編輯框上方「原始碼」，將語法貼入。

二、「自訂頁面用 - 自訂輪播圖/影片」語法

▪︎ 輪播圖片

<ul class="youtbue-carousel">
<li style="list-style-type:none;display:inline;margin:0px;">
<center><img alt="" onerror="imgError(this);" src="圖片連結" style="width:auto;display:inline-block" /></center>
</li>
<li style="list-style-type:none;display:inline;margin:0px;">
<center><img alt="" onerror="imgError(this);" src="圖片連結" style="width:auto;display:inline-block" /></center>
</li>
</ul>
<script>
function init_inline() {
$(".youtbue-carousel").lightSlider({
auto: true,
pager: false,
item:1,
loop: true,
speed: 700, //ms
pause: 3000,
});
}
</script>

▪︎ 輪播影片

<ul class="youtbue-carousel">
<li style="list-style-type:none;display:inline;margin:0px;">
<div style="width:100%;max-width:1200px">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="影片嵌入連結"></iframe></div>
</div>
</li>
<li style="list-style-type:none;display:inline;margin:0px;">
<div style="width:100%;max-width:1200px">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="影片嵌入連結"></iframe></div>
</div>
</li>
<li style="list-style-type:none;display:inline;margin:0px;">
<div style="width:100%;max-width:1200px">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="影片嵌入連結"></iframe></div>
</div>
</li>
</ul>
<script>
function init_inline() {
$(".youtbue-carousel").lightSlider({
auto: true,
pager: false,
item:1,
loop: true,
speed: 700, //ms
pause: 3000,
});
}
</script>