<section class="slideshow">
	<div class="container-fluid">
		<div class="swiper swiper-{{ random }}">
		<div class="swiper-wrapper">
			{% for banner in banners %}
			 <div class="swiper-slide">
				<div class="banner-content">
					<img src="{{ banner.image }}" alt="" class="d-none d-lg-block" loading="lazy">
					<img src="{{ banner.image_mob }}" alt="" class="d-block d-lg-none" loading="lazy">
					<div class="banner-text">
						<h2 class="heading">{{ banner.title }}</h2>
						<div class="subheading"><p>{{ banner.text|split('\n')|join('</p><p>') }}</p></div>
						{% if banner.link and banner.button %}
						<div class="d-block mt-5">
						<a href="{{ banner.link }}" class="btn btn-white">{{ banner.button }}</a>
						</div>
						{% endif %}
					</div>
				</div>
			 </div>
			{% endfor %}
		</div>
		<div class="swiper-pagination"></div>
	  </div>
	</div>
	<script>
    var swiper = new Swiper(".swiper-{{ random }}", {
		autoHeight: true,
		autoplay: {
			delay: 7000,
		},
		loop: true,
		pagination: {
			el: ".swiper-{{ random }} .swiper-pagination",
		},
    });
  </script>
</section>