<div class="container">
	<div class="carousel brand">
		<div class="page-title hidden">
			<h3>{{ heading_title }}</h3>
		</div>
		<div class="swiper-viewport">
			<div id="carousel{{ module }}" class="swiper-container">
				<div class="swiper-wrapper">
					{% for banner in banners %}
						<div class="swiper-slide col-sm-12">
							<div class="text-center">
								{% if banner.link %}
									<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive m-auto" /></a>
								{% else %}
									<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive m-auto" />
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
			<div class="swiper-pagination carousel{{ module }}"></div>
			<div class="swiper-pager">				
				<div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>
				<div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>
			</div>
		</div>
	</div>
</div>
<script><!--
$(document).ready(function() {
	$('#carousel{{ module }}').swiper({
		mode: 'horizontal',
		slidesPerView: 6,
		paginationClickable: false,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		loop: true,
		autoplay: 5000,
		autoplayDisableOnInteraction: true,
		breakpoints: {
			1199: {
				slidesPerView: 5,
				spaceBetween: 0
			},
			991: {
				slidesPerView: 4,
				spaceBetween: 0
			},
			600: {
				slidesPerView: 3,
				spaceBetween: 0
			},
			480: {
				slidesPerView: 2,
				spaceBetween: 0
			},
			319: {
				slidesPerView: 1,
				spaceBetween: 0
			}
		}
	});
});
--></script>