<div class="box carousel brand mt-50">
	<div class="container">
		<div class="">
		{# <div class="page-title">
			<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>
</div>
<script><!--
	$('#carousel{{ module }}').swiper({
		mode: 'horizontal',
		slidesPerView: 6,
		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>