<div class="swiper-viewport module-slideshow">
  <div id="slideshow{{ module }}_swiper" 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-pagination-{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next slideshow-next{{ module }}"></div>
    <div class="swiper-button-prev slideshow-prev{{ module }}"></div>
  </div>
</div>
<script type="text/javascript"><!--
jQuery(document).ready(function($) {
  var slideshow{{ module }}_swiper = new Swiper('#slideshow{{ module }}_swiper', {
    slidesPerView: 1,
    pagination: {
      el: '.slideshow-pagination-{{ module }}',
      clickable :true
    },
    navigation: {
      nextEl: '.slideshow-next{{ module }}',
      prevEl: '.slideshow-prev{{ module }}',
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    },
    loop: true
  });

  $('.module-slideshow').hover(function() {
    slideshow{{ module }}_swiper.autoplay.stop();
  }, function() {
    slideshow{{ module }}_swiper.autoplay.start();
  });
});
--></script>
