<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 }}">{% endif %}
        <img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive hidden-xs" />
        {% if banner.image_mobile %}<img src="{{ banner.image_mobile }}" alt="{{ banner.title }}" class="img-responsive visible-xs" />{% endif %}
        {% if banner.link %}</a>{% endif %}
        {% if banner.description %}<div class="banner-description">{{ banner.description }}</div>{% endif %}
        {% if banner.button_text and banner.link %}<a href="{{ banner.link }}" class="banner-button">{{ banner.button_text }}</a>{% endif %}
      </div>
      {% endfor %}</div>
  </div>
</div>
<script type="text/javascript"><!--
$('#banner{{ module }}').swiper({
	effect: 'fade',
	autoplay: 2500,
    autoplayDisableOnInteraction: false
});
--></script> 