Banner Rotativo
O seguinte artigo tem por objetivo implementar um banner rotativo.
Lembrando que o banner deve ser cadastrado como banner rotativo, para mais informações acesse o link https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743394900123-Banner-JavaScript-Banner-Rotativo
Para a criação do banner iremos utilizar o plugin Swiper (https://swiperjs.com/).
Adicionado o plugin ao tema
Adicione as chamadas abaixo antes do fechamento da tag head
do arquivo default.html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
Para o exemplo vamos utilizar o banner home.
Adicione o código abaixo no local onde deseja exibir o banner, no caso o banner.home
:
{% if banners.home %}
<div class="banner-home">
{% if banners.home.type == 'javascript' %}
<div class="swiper-container">
<div class="swiper-wrapper">
{% for slide in banners.home.slides %}
<div class="swiper-slide item">
<a href="{{ slide.link }}">
<img src="{{ slide.image }}" alt="{{ slide.label }}">
</a>
</div>
{% endfor %}
</div>
<div class="dots"></div>
</div>
{% else %}
<div class="item">
{% set link = banners.home.tracked_link ? banners.home.tracked_link : banners.home.link %}
{% if banners.home.link %}
<a href="{{ link }}" {% if banners.home.target == '_blank' %} target="_blank" rel="noreferrer noopener" {% endif %}>
<img src="{{ banners.home.src }}" alt="{{ banners.home.alt }}">
</a>
{% else %}
<span>
<img src="{{ banners.home.src }}" alt="{{ banners.home.alt }}">
</span>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
Adicione o código abaixo em seu arquivo .js.
if(jQuery('.banner-home').length){
new Swiper('.banner-home .swiper-container', {
preloadImages : false,
loop : true,
effect : 'slide',
autoplay :{
delay: 5000,
disableOnInteraction : false
},
autoHeight: true,
lazy : true,
pagination: {
el : '.banner-home .dots',
bulletClass : 'dot',
bulletActiveClass : 'dot-active',
clickable : true
},
});
}
Last updated
Was this helpful?