Skip to main content
O componente Banners busca e renderiza banners cadastrados no painel da Yampi. Suporta exibição estática ou em carrossel, com controle de dimensões para desktop e mobile.

​
Uso

<banners
  section="main_banner"
  :ids="{{ section.banners | map(b => b.id) | json_encode }}"
  :carousel="true"
  :slider-delay="5"
  :first-banner="{{ section.banners[0] | json_encode }}"
  :dimensions="{{ section.dimensions | json_encode }}"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
sectionString✅—Identificador da seção onde o banner será exibido. Usado internamente para cache e rastreamento.
idsArray✅—Lista de IDs dos banners a serem carregados via API.
containerBoolean❌trueQuando false, o banner ocupa a largura total da tela ignorando o container padrão.
carouselBoolean❌falseExibe os banners em carrossel com navegação entre slides.
sliderDelayNumber❌0Intervalo em segundos para troca automática de slides. 0 desativa a troca automática.
quantityNumber❌0Quantidade de banners exibidos por linha quando carousel é false.
dimensionsObject❌{}Dimensões do banner para exibição antes do carregamento (evita layout shift). Ver objeto dimensions.
firstBannerObject❌nullDados do primeiro banner para renderização SSR imediata. Ver objeto firstBanner.
slugString❌''Slug de uma categoria ou promoção associada ao banner (utilizado para redirecionamento).
autoHeightBoolean❌falseAjusta a altura do banner automaticamente de acordo com a imagem carregada.
autoWidthBoolean❌falseAjusta a largura do banner automaticamente de acordo com a imagem carregada.
customClassString❌''Classe CSS extra aplicada ao elemento raiz do componente.

​
Objeto firstBanner

Usado para renderizar o primeiro banner imediatamente, sem aguardar a chamada à API. Ideal para performance em banners acima da dobra.
PropriedadeTipoObrigatóriaValor padrãoDescrição
idNumber✅—ID do banner.
imageString✅—URL da imagem para desktop.
mobile_imageString❌—URL da imagem para mobile. Se ausente, usa image.
linkString❌—URL de redirecionamento ao clicar no banner.
stopwatchString❌nullExibe um cronômetro sobre o banner. Valores: null ou 'daily'.

​
Objeto dimensions

Define as dimensões reservadas antes do carregamento da imagem, prevenindo layout shift (CLS).
PropriedadeTipoObrigatóriaDescrição
desktopObject❌Objeto { height: Number, width: Number } em pixels para desktop.
mobileObject❌Objeto { height: Number, width: Number } em pixels para mobile.