轉盤 carousel

Last update: Fri May 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
Dynamic Media Classic,Viewers,SDK/API,Carousel Banners

建立對象：

Developer
User

轉盤檢視器是一種檢視器，可顯示不可縮放橫幅影像的轉盤，其中包含可點按的熱點或區域。此檢視器可協助您實作「可購物輪播」體驗，讓使用者可在橫幅影像上選取熱點或區域。他們會被重新導向至客戶網站上的「快速檢視」或產品詳細資料頁面。專為桌上型電腦和行動裝置所設計。

NOTE

此檢視器不支援使用影像演算或使用者產生內容(UGC)的影像。

檢視器型別為511。

示範URL section-c0ad383db6a444979dc7eeb1ec4cf54d

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewerDemo.html?lang=zh-Hant

系統要求 section-b7270cc4290043399681dc504f043609

另請參閱系統需求.

使用輪播檢視器 section-e6c68406ecdc4de781df182bbd8088b4

轉盤檢視器代表主要JavaScript檔案和一組協助程式檔案（單一JavaScript包含此特定檢視器使用的所有Viewer SDK元件、資產、CSS），這些檔案由檢視器在執行階段下載。

輪播檢視器既可以透過隨IS檢視器提供的生產就緒HTML頁面在快顯視窗模式中使用，也可以透過已記錄的API在嵌入模式中整合至目標網頁。

設定和外觀設定類似於本說明中說明的其他檢視器。所有外觀設定都是透過自訂CSS來達成。

另請參閱所有檢視器通用的命令參考 — 設定屬性和所有檢視器通用的命令參考 — URL

與輪播檢視器互動 section-642e66ca38cd4032992840ec6c0b0cd2

瀏覽輪播集時，可在主檢視上水準撥動，或是在案頭裝置上使用兩個箭頭按鈕來完成。設定指標點會顯示設定內的目前位置。

檢視器可以轉譯橫幅影像上方的熱點或區域，以指出產品上的互動區域。

在製作期間，按一下或點選熱點或區域會觸發與其相關聯的動作。動作可能會重新導向至網站上的不同頁面，或是產品資訊傳回網頁邏輯，進而觸發具有相關產品內容的「快速檢視」。

檢視器可使用完整的鍵盤。

另請參閱鍵盤協助工具與導覽.

內嵌輪播檢視器 section-6bb5d3c502544ad18a58eafe12a13435

關於彈出式模式

在快顯視窗模式中，檢視器會在個別的網頁瀏覽器視窗或標籤中開啟。它會取用整個瀏覽器視窗區域，並在瀏覽器調整大小或行動裝置的方向變更時進行調整。

快顯視窗模式最常用於行動裝置。網頁會使用載入檢視器 window.open() JavaScript呼叫，已正確設定 A HTML元素或任何其他合適的方法。

建議您使用現成的HTML頁面作為快顯視窗操作模式。在此案例中，其名稱為 CarouselViewer.html 且位於 html5/ 標準IS-Viewers部署的子資料夾：

<s7viewers_root>/html5/CarouselViewer.html

您可以套用自訂CSS來實現視覺化自訂。

以下是在新視窗中開啟檢視器的HTML程式碼範例：

<a href="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/CarouselViewer.html?asset=/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner&serverurl=https://adobedemo62-h.assetsadobe.com/is/image" target="_blank">Open popup viewer</a>

關於固定大小內嵌模式和回應式設計內嵌模式

在內嵌模式中，檢視器會新增至現有網頁。此網頁可能已有某些與檢視器無關的客戶內容。檢視器通常只會佔用網頁的一部分空間。

主要使用案例是針對桌上型電腦或平板電腦裝置的網頁，以及可根據裝置型別自動調整版面的回應式設計頁面。

當檢視器在初始載入後未變更其大小時，會使用固定大小內嵌。此方法適用於具有靜態配置的網頁。

回應式設計內嵌假設檢視器必須在執行階段調整大小來回應其容器的大小變更 DIV. 最常見的使用案例是將檢視器新增至使用彈性頁面配置的網頁。

在回應式設計內嵌模式中，檢視器的行為會因網頁大小其容器的方式而異 DIV. 如果網頁僅設定容器的寬度 DIV，只要其高度不受限制，檢視器就會根據所使用資產的外觀比例，自動選擇其高度。此功能可確保資產完全符合檢視要求，而不需在兩側加上任何邊框間距。此使用案例最常用於使用回應式網頁設計版面架構(例如Bootstrap和Foundation)的網頁。

否則，如果網頁同時設定檢視器容器的寬度和高度 DIV，檢視器會填滿該區域。它也遵循網頁版面配置提供的大小。一個好的範例是內嵌檢視器至強制回應覆蓋圖，其中覆蓋圖會根據網頁瀏覽器視窗大小調整大小。

固定大小內嵌

您可以執行下列動作，將檢視器新增至網頁：

將檢視器JavaScript檔案新增至網頁。
定義容器 DIV.
設定檢視器大小。
建立和初始化檢視器。
將檢視器JavaScript檔案新增至網頁。

建立檢視器需要您在HTML標頭中新增指令碼標籤。在使用檢視器API之前，請務必先包含 CarouselViewer.js. 此 CarouselViewer.js 檔案位於 html5/js/ 標準IS-Viewers部署的子資料夾：

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js

如果檢視器部署在某個Adobe Dynamic Media Classic伺服器上，且從相同網域提供服務，則可以使用相對路徑。否則，您需要指定已安裝IS-Viewers的其中一個Adobe Dynamic Media Classic伺服器的完整路徑。

相對路徑如下所示：

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>

NOTE

僅參照主要檢視器JavaScript include 檔案時。請勿在網頁程式碼中參考任何其他JavaScript檔案（這些檔案可能由檢視器的邏輯在執行階段下載）。尤其請勿直接參照HTML5 SDK Utils.js 檢視器從載入的程式庫 /s7viewers 內容路徑（所謂的整合SDK） include)。原因在於 Utils.js 或類似的執行階段檢視器程式庫完全由檢視器的邏輯管理，且位置會在檢視器版本之間變更。 Adobe不會保留次要檢視器的舊版本 includes 在伺服器上。

因此，直接參照任何次要JavaScript include 當日後部署新產品版本時，頁面上檢視器使用的檢視器功能會中斷檢視器。

定義容器 DIV.

新增空白 DIV 元素至您要顯示檢視器的頁面。此 DIV 元素必須定義其ID，因為此ID稍後會傳遞至檢視器API。 DIV的大小是透過CSS指定的。

預留位置 DIV 是定位元素，這表示 position CSS屬性已設定為 relative 或 absolute.

以下是已定義預留位置的範例 DIV 元素：

code language-css
`<div id="s7viewer" style="position:relative"></div>`

設定檢視器大小

您可以宣告檢視器的靜態大小，將它設為 .s7carouselviewer 以絕對單位表示的頂層CSS類別，或是使用 stagesize 修飾元。

您可以直接在HTML頁面上放入CSS的大小調整。或者，您可以將大小調整放入自訂檢視器CSS檔案中，稍後再將該檔案指派給AEM Assets中的檢視器預設集記錄（隨選），或明確使用 style 命令。

另請參閱自訂轉盤檢視器以取得有關使用CSS設定檢視器樣式的詳細資訊。

以下是在「HTML」頁面中定義靜態檢視器大小的範例：

code language-css
`#s7viewer.s7carouselviewer { width: 1174px; height: 500px; }`

您可以明確傳遞 stagesize 含有檢視器初始化程式碼的修飾元 params 集合或作為API呼叫，如命令參考一節中所述，如下所示：

code language-css
`carouselViewer.setParam("stagesize", "1174,500");`

建議使用以CSS為基礎的方法，並用於此範例。

建立和初始化檢視器。

完成上述步驟後，您會建立 s7viewers.CarouselViewer 類別，將所有設定資訊傳遞至其建構函式，並呼叫 init() 檢視器例項的方法。設定資訊會以JSON物件的形式傳遞至建構函式。此物件至少應具有 containerId 包含檢視器容器ID名稱且以巢狀顯示的欄位 params 具有檢視器支援之設定引數的JSON物件。在此案例中， params 物件至少必須將影像伺服URL傳遞為 serverUrl 屬性，並將初始資產設為 asset 引數。 JSON型初始化API可讓您使用一行程式碼建立及啟動檢視器。

請務必將檢視器容器新增至DOM，讓檢視器程式碼可依其ID找到容器元素。有些瀏覽器會延遲建立DOM，直到網頁結尾。如需最大相容性，請呼叫 init() 方法（在結尾之前） BODY 標籤或內文 onload() 事件。

同時，容器元素不一定會成為網頁版面的一部分。例如，它可能會使用以下專案隱藏： display:none 樣式已指派給它。在此情況下，檢視器會延遲其初始化程式，直到網頁將容器元素帶回版面配置為止。當此功能啟動時，檢視器會自動繼續載入。

以下範例說明如何建立檢視器例項、將最低必要的設定選項傳遞至建構函式，以及呼叫 init() 方法。範例假設 carouselViewer 是檢視器例項； s7viewer 是預留位置的名稱 DIV； https://adobedemo62-h.assetsadobe.com/is/image 是「影像伺服」URL，以及 /content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner 為資產：

code language-javascript

code language-javascript
`<script type="text/javascript"> var carouselViewer = new s7viewers.CarouselViewer ({ "containerId":"s7viewer", "params":{ "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" } }).init(); </script>`

<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer ({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>

下列程式碼是嵌入固定大小轉盤檢視器的簡單網頁的完整範例：

code language-html

code language-html
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script> <style type="text/css"> #s7viewer.s7carouselviewer { width: 1174px; height: 500px; } </style> </head> <body> <div id="s7viewer" style="position:relative"></div> <script type="text/javascript"> var carouselViewer = new s7viewers.CarouselViewer({ "containerId":"s7viewer", "params":{ "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner", "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image" } }).init(); </script> </body> </html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
#s7viewer.s7carouselviewer {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

高度不受限制的回應式設計內嵌

透過回應式設計內嵌，網頁通常會有某種彈性的版面配置，可指定檢視器容器的執行階段大小 DIV. 對於以下範例，假設網頁允許檢視器的容器 DIV 以取得網頁瀏覽器視窗大小的40%。而且，其高度不受限制。網頁HTML程式碼如下所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 80%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

將檢視器新增至這類頁面，類似於固定大小內嵌的步驟。唯一的區別是您不需要明確定義檢視器大小。

將檢視器JavaScript檔案新增至網頁。
定義容器 DIV.
建立和初始化檢視器。

上述所有步驟與固定大小內嵌的步驟相同。新增容器 DIV 至現有 "holder" DIV. 下列程式碼為完整範例。請注意瀏覽器調整大小時檢視器大小的變化，以及檢視器外觀比例與資產相符的方式。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
.holder {
 width: 80%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

以下範例頁面說明高度不受限制的回應式設計內嵌在實際應用中的更多情況：

https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/carousel/CarouselViewer-responsive-unrestricted-height.html?lang=zh-Hant

定義寬度和高度的彈性大小內嵌

在定義寬度和高度的彈性大小內嵌中，網頁的樣式不同。它提供兩種大小給 "holder" 在瀏覽器視窗中進行DIV和置中。此外，網頁會設定 HTML 和 BODY 元素至100%。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

其餘的內嵌步驟與高度不受限制的回應式內嵌所使用的步驟相同。產生的範例如下：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner",
 "serverurl":"https://adobedemo62-h.assetsadobe.com/is/image"
}
}).init();
</script>
</body>
</html>

使用Setter型API內嵌

您可以使用setter型API和no-args建構函式，而不使用JSON型初始化。使用此API建構函式不接受任何引數，而且設定引數是透過以下方式指定的： setContainerId()， setParam()、和 setAsset() 具有個別JavaScript呼叫的API方法。

下列範例說明如何將固定大小內嵌與setter型API搭配使用：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
<style type="text/css">
#s7viewer.s7carouselviewer {
 width: 1174px;
 height: 500px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var carouselViewer = new s7viewers.CarouselViewer();
carouselViewer.setContainerId("s7viewer");
carouselViewer.setParam("serverurl", "https://adobedemo62-h.assetsadobe.com/is/image");
carouselViewer.setAsset("/content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner");
carouselViewer.init();
</script>
</body>
</html>

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8