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.

Javascript

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
    },
  });
}