Explicaremos aqui como criar um slider de condições da loja acima do header da página.

O resultado final seria igual a esse abaixo.

Veja como fazer abaixo:

<aside> 💡

Para criar um slider de condições no topo, insira esse código dentro do seu topo.html:

</aside>

<div class="top-conditions">
<div class="container">
<span data-wsjs-module="condition" data-wsjs-options="icon:false"
data-wsjs-slide="arrows: true; autoplay: 3000"></span>
</div>
</div>

<aside> 💡

Dentro do folha.css adicione estas propriedades

</aside>

.top-conditions{
background-color: var(--bg-menu-topconditions);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
header .top-conditions .container {
display: flex;
justify-content: space-between;
}
header .condicoes-loja .condicao-item, .condicoes-loja .keen-slider {
width: 100%;
max-height: 4rem;
}
header .condicoes-loja .condicao-item, header .condicoes-loja .condicao-item > .condicao-hiperlink{
align-items: center;
}
header .condicao-textos {
display: flex;
gap: .5rem;
}
header .condicao-textos h3 {
line-height: 2.4rem;
}
header .condicoes-loja .condicao-titulo,
header .condicoes-loja .condicao-subtitulo {
color: var(--color-menu);
font-size: 1.4rem;
}
header .condicoes-loja .condicao-titulo {
font-weight: 600;
text-transform: uppercase;
}
header .condicoes-loja{
width: 100%;
}
header .condicoes-loja p {
width: fit-content;
}
header .condicoes-loja .keen-slider .keen-slider__slide {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}

Sinta-se a vontade para mudar cores e tamanhos usando este código acima.

<aside> 💡

Para definir a rolagem dos elementos dentro do slide para vertical, basta adicionar “vertical:true;” em seu código:

</aside>

<div class="top-conditions">
<div class="container">
<span data-wsjs-module="condition" data-wsjs-options="icon:false"
data-wsjs-slide=**"vertical: true;** arrows: true;
 autoplay: 3000"></span>
</div>
</div>

Para retornar para o rolamento na horizontal, basta remove-lo do código. (parte destacada em vermelho)

Para remover as setinhas do seu top-conditions, basta remove-lo do seu código html. ( parte destacada em azul)

Para aumentar ou diminuir o tempo que os elementos demoram para rotacionar automaticamente, basta mudar o tempo em “autoplay: 3000” para o numero desejado. ( parte destacada em verde)