<div class="box carousel brand mt-50">
	<div class="container">	
		<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><!--
	$('#carousel{{ module }}').swiper({
		mode: 'horizontal',
		slidesPerView: 7,
		paginationClickable: false,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		loop: true,
		autoplay: 4000,
		autoplayDisableOnInteraction: true,
		breakpoints: {
			1750: {
				slidesPerView: 7,
				spaceBetween: 0
			},
			1440: {
				slidesPerView: 6,
				spaceBetween: 0
			},
			1199: {
				slidesPerView: 5,
				spaceBetween: 0
			},
			767: {
				slidesPerView: 4,
				spaceBetween: 0
			},
			600: {
				slidesPerView: 3,
				spaceBetween: 0
			},
			480: {
				slidesPerView: 2,
				spaceBetween: 0
			},
			300: {
				slidesPerView: 1,
				spaceBetween: 0
			}
		}
	});
--></script>