Carrossel carousel

O Visualizador do carrossel é um visualizador que exibe um carrossel de imagens de banner sem zoom com pontos de acesso ou regiões clicáveis. Esse visualizador pode ajudar você a implementar uma experiência de "carrossel para compra", em que os usuários podem selecionar um ponto de acesso ou uma região sobre a imagem do banner. Eles podem ser redirecionados para uma página de detalhes do produto ou de Quickview no site do cliente. Ele foi projetado para funcionar em desktops e dispositivos móveis.

NOTE
Imagens que usam Renderização de Imagem ou Conteúdo Gerado pelo Usuário (UGC) não são compatíveis com esse visualizador.

Tipo de visualizador 511.

URL de demonstração section-c0ad383db6a444979dc7eeb1ec4cf54d

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

Requisitos do sistema section-b7270cc4290043399681dc504f043609

Consulte Requisitos do sistema.

O Visualizador do carrossel representa um arquivo JavaScript principal e um conjunto de arquivos auxiliares (um único JavaScript inclui todos os componentes do SDK do visualizador usados por esse visualizador específico, ativos, CSS) baixados pelo visualizador em tempo de execução.

O Visualizador do carrossel pode ser usado no modo pop-up usando uma página de HTML pronta para produção fornecida com os Visualizadores IS ou no modo incorporado, onde é integrado à página da Web de destino usando a API documentada.

A configuração e a aparência são semelhantes às dos outros visualizadores descritos nesta Ajuda. Toda a atribuição de capa é obtida por meio de CSS personalizado.

Consulte Referência de comando comum a todos os visualizadores - Atributos de configuração e Referência de comando comum a todos os visualizadores - URL

Interação com o visualizador do carrossel section-642e66ca38cd4032992840ec6c0b0cd2

A navegação pelo conjunto de carrossel é feita com um deslizamento horizontal sobre a exibição principal ou com dois botões de seta disponíveis no dispositivo de desktop. Definir pontos indicadores mostra a posição atual dentro do conjunto.

O visualizador pode renderizar pontos de acesso ou regiões na parte superior da imagem do banner para indicar a área interativa no produto.

Clicar ou tocar em um ponto de acesso ou região aciona uma ação associada a ele durante o tempo de criação. A ação pode ser redirecionada para uma página diferente no site ou pode transmitir as informações do produto de volta à lógica da página da Web, que, por sua vez, pode acionar uma exibição rápida com conteúdo de produto relacionado.

O visualizador é totalmente acessível pelo teclado.

Consulte Acessibilidade e navegação pelo teclado.

Incorporação do visualizador do carrossel section-6bb5d3c502544ad18a58eafe12a13435

Sobre o modo pop-up

No modo pop-up, o visualizador é aberto em uma janela ou guia separada do navegador da Web. Ele ocupa toda a área da janela do navegador e se ajusta caso o navegador seja redimensionado ou a orientação de um dispositivo móvel seja alterada.

O modo pop-up é o mais comum para dispositivos móveis. A página da Web carrega o visualizador usando window.open() Chamada de JavaScript, configurada corretamente A elemento HTML ou qualquer outro método adequado.

É recomendável usar uma página de HTML pronta para uso para o modo de operação pop-up. Nesse caso, é chamado de CarouselViewer.html e estiver localizado na html5/ subpasta da implantação padrão do IS-Viewers:

<s7viewers_root>/html5/CarouselViewer.html

Você pode obter personalização visual aplicando CSS personalizado.

Veja a seguir um exemplo do código HTML que abre o visualizador em uma nova janela:

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

Sobre o modo de incorporação de tamanho fixo e o modo de incorporação de design responsivo

No modo incorporado, o visualizador é adicionado à página da Web existente. Esta página da Web pode já ter algum conteúdo de cliente não relacionado ao visualizador. O visualizador normalmente ocupa apenas uma parte do patrimônio imobiliário de uma página da Web.

Os principais casos de uso são páginas da Web orientadas para desktops ou dispositivos tablets e páginas projetadas responsivas que ajustam o layout automaticamente dependendo do tipo de dispositivo.

A incorporação de tamanho fixo é usada quando o visualizador não altera seu tamanho após o carregamento inicial. Esse método é a melhor opção para páginas da Web com layout estático.

A incorporação responsiva de design presume que o visualizador deve redimensionar em tempo de execução em resposta à alteração de tamanho de seu contêiner DIV. O caso de uso mais comum é adicionar um visualizador a uma página da Web que usa um layout de página flexível.

No modo de incorporação de design responsivo, o visualizador se comporta de forma diferente, dependendo da forma como a página da Web dimensiona seu contêiner DIV. Se a página da Web definir somente a largura do container DIV, deixando sua altura irrestrita, o visualizador escolhe automaticamente sua altura de acordo com a proporção do ativo usado. Essa funcionalidade garante que o ativo se ajuste perfeitamente à exibição sem qualquer preenchimento nas laterais. Esse caso de uso é o mais comum para páginas da Web que usam estruturas responsivas de layout de design da Web, como Bootstrap e Foundation.

Caso contrário, se a página da Web definir a largura e a altura do container do visualizador DIV, o visualizador preenche apenas essa área. Ela também segue o tamanho fornecido pelo layout da página da Web. Um bom exemplo é a incorporação do visualizador em uma sobreposição modal, em que a sobreposição é dimensionada de acordo com o tamanho da janela do navegador da Web.

Incorporação de tamanho fixo

Você adiciona o visualizador a uma página da Web fazendo o seguinte:

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.

  2. Definição do contêiner DIV.

  3. Definindo o tamanho do visualizador.

  4. Criar e inicializar o visualizador.

  5. Adicionar o arquivo JavaScript do visualizador à página da Web.

    A criação de um visualizador exige a adição de uma tag de script no cabeçalho de HTML. Antes de usar a API do visualizador, inclua CarouselViewer.js. A variável CarouselViewer.js O arquivo está localizado sob o html5/js/ subpasta da implantação padrão do IS-Viewers:

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

Você pode usar um caminho relativo se o visualizador for implantado em um dos servidores do Adobe Dynamic Media Classic e for distribuído no mesmo domínio. Caso contrário, especifique um caminho completo para um dos servidores do Adobe Dynamic Media Classic que têm os Visualizadores IS instalados.

O caminho relativo tem a seguinte aparência:

<script language="javascript" type="text/javascript" src="/etc/dam/viewers/s7viewers/html5/js/CarouselViewer.js"></script>
NOTE
Fazer referência apenas ao JavaScript do visualizador principal include arquivo na sua página. Não faça referência a nenhum arquivo JavaScript adicional no código da página da Web que possa ser baixado pela lógica do visualizador no tempo de execução. Em particular, não faça referência direta ao SDK do HTML5 Utils.js biblioteca carregada pelo visualizador de /s7viewers caminho de contexto (o chamado SDK consolidado) include). O motivo é que a localização de Utils.js ou bibliotecas semelhantes do visualizador de tempo de execução são totalmente gerenciadas pela lógica do visualizador e a localização muda entre as versões do visualizador. O Adobe não mantém versões mais antigas do visualizador secundário includes no servidor.
Como resultado, ao inserir uma referência direta a qualquer JavaScript secundário include usado pelo visualizador na página interrompe a funcionalidade do visualizador no futuro, quando uma nova versão do produto é implantada.
  1. Definição do contêiner DIV.

    Adicionar um vazio DIV elemento para a página onde deseja que o visualizador apareça. A variável DIV O elemento deve ter sua ID definida porque essa ID é passada posteriormente para a API do visualizador. O DIV tem seu tamanho especificado por meio de CSS.

    O espaço reservado DIV é um elemento posicionado, o que significa que a variável position A propriedade CSS está definida como relative ou absolute.

    Veja a seguir um exemplo de um espaço reservado definido DIV elemento:

    code language-css
    <div id="s7viewer" style="position:relative"></div>
    
  2. Definir o tamanho do visualizador

    Você pode definir o tamanho estático do visualizador declarando-o para .s7carouselviewer classe CSS de nível superior em unidades absolutas ou usando stagesize modificador.

    Você pode colocar o dimensionamento em CSS diretamente na página do HTML. Ou você pode colocar o dimensionamento em um arquivo CSS do visualizador personalizado, que será posteriormente atribuído a um registro predefinido do visualizador no AEM Assets - Sob demanda ou transmitido explicitamente usando o style comando.

    Consulte Personalização do visualizador do Carousel para obter mais informações sobre como estilizar o visualizador com CSS.

    Este é um exemplo de definição de um tamanho de visualizador estático na página HTML:

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

    Você pode transmitir explicitamente a variável stagesize modificador com o código de inicialização do visualizador com params ou como uma chamada de API, conforme descrito na seção Referência de comandos, desta forma:

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

    Uma abordagem baseada em CSS é recomendada e é usada neste exemplo.

  3. Criar e inicializar o visualizador.

    Quando tiver concluído as etapas acima, você criará uma instância de s7viewers.CarouselViewer classe, transmita todas as informações de configuração para seu construtor e chame init() em uma instância do visualizador. As informações de configuração são passadas ao construtor como um objeto JSON. No mínimo, esse objeto deve ter containerId campo que contém o nome da ID do contêiner de visualização e aninhado params Objeto JSON com parâmetros de configuração compatíveis com o visualizador. Neste caso, o params objeto deve ter pelo menos o URL do Servidor de imagens passado como serverUrl propriedade e o ativo inicial como asset parâmetro. A API de inicialização baseada em JSON permite criar e iniciar o visualizador com uma única linha de código.

    É importante adicionar o contêiner do visualizador ao DOM para que o código do visualizador possa encontrar o elemento do contêiner por sua ID. Alguns navegadores atrasam a criação do DOM até o fim da página da Web. Para obter compatibilidade máxima, chame o init() método antes do fechamento BODY ou no corpo onload() evento.

    Ao mesmo tempo, o elemento de contêiner não deve necessariamente fazer parte do layout da página da Web ainda. Por exemplo, pode ser oculto usando display:none estilo atribuído a ele. Nesse caso, o visualizador atrasa o processo de inicialização até o momento em que a página da Web traz o elemento de contêiner de volta ao layout. Quando essa funcionalidade ocorre, a carga do visualizador é retomada automaticamente.

    Veja a seguir um exemplo de criação de uma instância do visualizador, transmitindo o mínimo de opções de configuração necessárias para o construtor e chamando o init() método. O exemplo assume carouselViewer é a instância do visualizador; s7viewer é o nome do espaço reservado DIV; https://adobedemo62-h.assetsadobe.com/is/image é o URL do Servidor de imagens e /content/dam/dm-public-facing-live-demo-page/04_shoppable_carousel/05_shoppable_banner é o ativo:

    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>
    

    O código a seguir é um exemplo completo de uma página da Web trivial que incorpora o Visualizador do carrossel com um tamanho fixo:

    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>
    

Incorporação responsiva de design com altura irrestrita

Com a incorporação responsiva de design, a página da Web normalmente tem algum tipo de layout flexível em vigor que determina o tamanho do tempo de execução do container do visualizador DIV. Para o exemplo a seguir, considere que a página da Web permite o container do visualizador DIV para obter 40% do tamanho da janela do navegador web. E sua altura é deixada irrestrita. O código de HTML da página da Web seria semelhante ao seguinte:

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

Adicionar o visualizador a essa página é semelhante às etapas para incorporação de tamanho fixo. A única diferença é que não é necessário definir explicitamente o tamanho do visualizador.

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.
  2. Definição do contêiner DIV.
  3. Criar e inicializar o visualizador.

Todas as etapas acima são as mesmas da incorporação de tamanho fixo. Adicionar o contêiner DIV ao atual "holder" DIV. O código a seguir é um exemplo completo. Observe como o tamanho do visualizador muda quando o navegador é redimensionado e como a taxa de proporção do visualizador corresponde ao ativo.

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

A página de exemplos a seguir ilustra mais usos reais da incorporação responsiva de design com altura irrestrita:

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

Incorporação de tamanho flexível com definição de largura e altura

Na incorporação de tamanho flexível com largura e altura definidas, o estilo da página da Web é diferente. Ele fornece ambos os tamanhos para o "holder" DIV e centralize-o na janela do navegador. Além disso, a página da Web define o tamanho da variável HTML e BODY para 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>

O restante das etapas de incorporação são idênticas às etapas usadas para incorporação responsiva com altura irrestrita. O exemplo resultante é o seguinte:

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

Incorporação usando API baseada em setter

Em vez de usar a inicialização baseada em JSON, é possível usar a API baseada em setter e o construtor sem args. O uso deste construtor de API não aceita parâmetros e os parâmetros de configuração são especificados usando setContainerId(), setParam(), e setAsset() Métodos de API do com chamadas de JavaScript separadas.

O exemplo a seguir ilustra o uso da incorporação de tamanho fixo com a API baseada em setter:

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