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
});
});
Comentários