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