{% if banners %}
<div class="row py-3 py-lg-4">
	<div class="col-lg-12">
		<div id="slideshow{{ module }}" class="default-slideshow swiper">
			<div class="swiper-wrapper mb-5">
				{% for banner in banners %}
					<div class="content-block item swiper-slide text-center p-0">
						{% if banner.link %}
							<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid w-100" width="{{ banner.width }}" height="{{ banner.height }}"{% if not loop.first %} loading="lazy"{% endif %} /></a>
						{% else %}
							<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-fluid w-100" width="{{ banner.width }}" height="{{ banner.height }}"{% if not loop.first %} loading="lazy"{% endif %} />
						{% endif %}
					</div>
				{% endfor %}
			</div>
			<div class="swiper-pagination swiper-pagination-{{ module }}"></div>
		</div>
	</div>
</div>
<script>
	document.addEventListener('DOMContentLoaded', function() {
		var slideshowSwiper = new Swiper('#slideshow{{ module }}', {
			autoplay: {
				delay: 5000,
				disableOnInteraction: false
			},
			pagination: {
				el: '.swiper-pagination-{{ module }}',
				clickable: true
			},
			slidesPerView: 1,
			loop: true
		});
	});
</script>
{% endif %}
