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
<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.
{% 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 %}