O seguinte artigo tem por objetivo implementar um banner responsivo utilizando o OpenCode.

Para a criação do banner iremos utilizar o plugin Owl Carousel .

Adicionado o plugin ao tema

Adicione as chamadas abaixo antes do fechamento da tag head do arquivo default.html

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Adicione o código abaixo no local onde deseja exibir o banner, no caso banner.home:

    {% if banner.home %}
      <div id="owl-demo" class="owl-carousel owl-theme">
        {% for slide in banners.home.slides %}
          <div class="item">
            <a href="{{ slide.link }}">
              <img src="{{ slide.image }}" alt="{{ slide.label}}">
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}

JS

Adicione o código abaixo em seu arquivo .js

 
$(document).ready(function() {
    $("#owl-demo").owlCarousel({
      items: 1,
      loop:true,
      autoPlay : 5000,
      stopOnHover : false
    });
  });

Exemplo

Taynara Sene

29 de dezembro de 2020 17:45