<div class="main-slider">
<div id="spinner"></div>
<div class="swiper-viewport">
  <div id="slideshow{{ module }}" class="swiper-container">
    <div class="swiper-wrapper"> 
	{% for banner in banners %}
      <div class="swiper-slide text-center">{% 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>
  </div>
  <div class="swiper-pagination slideshow{{ module }}"></div>
  <div class="swiper-pager">
  <ul class="swiper-pager-button">
    <li class="swiper-button-prev">
      <a class="swiper-prev"></a>
    </li>
    <li class="swiper-button-next">
      <a class="swiper-next"></a>
    </li>
  </ul>
</div>
</div>
</div>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 1,
	pagination: '.slideshow{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 0,
	autoplay: 5000,
    autoplayDisableOnInteraction: true,
	loop: true,
	effect: 'fade'
});
--></script>

<script type="text/javascript">
	// Can also be used with $(document).ready()
	$(window).load(function() {		
	  $("#spinner").fadeOut("slow");
	});	
</script>