<div class="swiper-viewport">
  <div id="banner{{ module }}" class="swiper-container">
    <div class="swiper-wrapper">
    	{% for banner in banners %}
      <div class="swiper-slide">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>
      {% endfor %}
    </div>
    {% if banners|length > 1 %}
    <div class="swiper-pagination module-banner-{{ module_id }}"></div>
    <div class="swiper-pager">
      <div class="swiper-button-next banner-next-{{ module_id }}"></div>
      <div class="swiper-button-prev banner-prev-{{ module_id }}"></div>
    </div>
    {% endif %}
  </div>
</div>

{% if banners|length > 1 %}
<script type="text/javascript"><!--
jQuery(document).ready(function($) {
	var slideshow{{ module }}_swiper = new Swiper('#banner{{ module }}', {
	  slidesPerView: 1,
	  pagination: {
	    el: '.module-banner-{{ module_id }}',
	    clickable :true
	  },
	  navigation: {
	    nextEl: '.banner-next-{{ module_id }}',
	    prevEl: '.banner-prev-{{ module_id }}',
	  },
	  autoplay: {
	    delay: 3000,
	    disableOnInteraction: false
	  },
	  loop: true
	});
});
--></script>
{% endif %}
