轮盘式

轮播查看器是一个查看器，它以轮播方式显示带有可单击热点或区域的不可缩放的横幅图像。 此查看器可帮助您实施“可购式轮播”体验，以便用户在横幅图像上选择热点或区域。 他们可能会被重定向到客户网站上的概览或产品详细信息页面。 它适用于台式机和移动设备。

查看器类型为511。

演示URL

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

系统要求

请参阅 系统要求.

使用轮播查看器

轮播查看器表示主JavaScript文件和一组由查看器在运行时下载的帮助程序文件（单个JavaScript包含该查看器的所有查看器SDK组件，这些组件由该特定查看器、资产和CSS使用）。

轮播查看器既可以在弹出模式下使用随IS查看器提供的生产就绪HTML页面，也可以在嵌入式模式下使用，在这种模式下，使用记录在案的API将其集成到目标网页中。

配置和外观设置与本帮助中描述的其他查看器的配置和外观设置类似。 所有外观设置都通过自定义CSS实现。

请参阅 所有查看器通用的命令引用 — 配置属性 和 所有查看器 — URL通用的命令引用

与轮播查看器交互

通过在主视图上水平轻扫或在桌面设备上有两个箭头按钮，可浏览轮播集。 设置指示点可显示设置内的当前位置。

查看器可以在横幅图像的顶部呈现热点或区域，以指示产品上的交互区域。

在创作期间，单击或点按热点或区域会触发与其关联的操作。 该操作可能会被重定向到网站上的其他页面，或者可以将产品信息传递回网页逻辑，而网页逻辑反过来又会触发包含相关产品内容的概览。

查看器完全可通过键盘访问。

请参阅 键盘辅助功能和导航.

嵌入轮播查看器

关于弹出模式

在弹出模式下，查看器在单独的Web浏览器窗口或选项卡中打开。 它会占用整个浏览器窗口区域，并在浏览器大小调整或移动设备方向发生更改时进行调整。

弹出模式是移动设备最常见的模式。 网页使用 window.open() JavaScript调用，已正确配置 A HTML元素，或任何其他合适的方法。

建议您使用现成的HTML页面进行弹出操作模式。 在这种情况下，它称为 CarouselViewer.html 和位于 html5/ 标准IS — 查看器部署的子文件夹：

<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，查看器在保持高度不受限制的情况下，会根据所用资产的宽高比自动选择高度。 此功能可确保资产完美地放入视图中，侧边无需任何内边距。 对于使用响应式Web设计布局框架(如Bootstrap和基础)的网页，此用例最常见。

否则，如果网页同时设置了查看器容器的宽度和高度 DIV，则查看器仅填充该区域。 它还遵循网页布局提供的大小。 一个很好的示例是将查看器嵌入到模式叠加中，其中的叠加根据Web浏览器窗口大小来调整大小。

固定大小嵌入

可通过执行以下操作将查看器添加到网页：

1. 将查看器JavaScript文件添加到网页。

2. 定义容器 DIV.

3. 设置查看器大小。

4. 创建和初始化查看器。

5. 将查看器JavaScript文件添加到网页。

   创建查看器要求您在HTML头中添加脚本标记。 在使用查看器API之前，请确保在 CarouselViewer.js. 的 CarouselViewer.js 文件位于 html5/js/ 标准IS — 查看器部署的子文件夹：

<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>

1. 定义容器 DIV.

   添加空 DIV 元素。 的 DIV 元素必须定义其ID，因为此ID稍后会传递到查看器API。 DIV的大小通过CSS指定。

   占位符 DIV 是定位元素，表示 position CSS属性设置为 relative 或 absolute.

   以下是定义占位符的示例 DIV 元素：

   <div id="s7viewer" style="position:relative"></div>
   

2. 设置查看器大小

   您可以通过声明查看器的静态大小 .s7carouselviewer 以绝对单位表示的顶级CSS类，或通过使用 stagesize 修饰符。

   您可以直接在CSS页面上放置大小调整HTML。 或者，您也可以将大小调整放入自定义查看器CSS文件中，该文件稍后会分配给AEM Assets — 按需中的查看器预设记录，或者使用 style 命令。

   请参阅 自定义轮播查看器 有关使用CSS为查看器设置样式的更多信息。

   以下示例用于在HTML页面中定义静态查看器大小：

   #s7viewer.s7carouselviewer {
    width: 1174px;
    height: 500px;
   }
   

   您可以明确传递 stagesize 具有查看器初始化代码的修饰符 params 集合或作为API调用（如命令引用部分中所述），如下所示：

   carouselViewer.setParam("stagesize", "1174,500");
   

   建议使用基于CSS的方法，该方法将在此示例中使用。

3. 创建和初始化查看器。

   完成上述步骤后，您将创建一个实例 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 是资产：

   <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>
   

   以下代码是嵌入具有固定大小的轮播查看器的普通网页的完整示例：

   <!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 以获取Web浏览器窗口大小的40%。 而且，它的高度不受限制。 网页HTML代码如下所示：

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

将查看器添加到此类页面的步骤与固定大小嵌入的步骤类似。 唯一的区别在于您无需明确定义查看器大小。

1. 将查看器JavaScript文件添加到网页。
2. 定义容器 DIV.
3. 创建和初始化查看器。

上述所有步骤与固定大小嵌入的步骤相同。 添加容器 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-Hans?lang=zh-Hans

定义宽度和高度的灵活大小嵌入

在定义了宽度和高度的灵活大小嵌入中，网页样式不同。 它为 "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>

Business.Adobe.com 资源

Multichannel Communication Content Insights Style System Targeted Content Document Generation Dynamic Media