{% if page.slider.count %}
	{% for slider in page.slider %}

		<article class="callouts-slider">
			<div class="callouts-slider__container container">

				<header class="callouts-slider__header">
					{% if slider.title.value %}
						<h1 class="callouts-slider__title">{{ slider.title | raw}}</h1>
					{% endif %}
					{% if slider.text.value %}
						<p class="callouts-slider__text">{{ slider.text }}</p>
					{% endif %}
					{% if slider.url.value and slider.label.value %}
						<a href="{{ slider.url.normalize }}" class="callouts-slider__btn">{{ slider.label.value }}</a>
					{% endif %}
				</header>

				{% if slider.slider_items.count %}
					<section class="splide" data-splide='{"type":"loop","pagination":false,"gap":16,"autoWidth":true}'>
						<div class="splide__track">

							<ul class="callouts-slider__list splide__list">
								{% for item in slider.slider_items %}
									<li class="callouts-slider__item splide__slide">
										<a href="{{ item.url.normalize }}" class="callouts-slider__item__link">
											<h2 class="callouts-slider__item__title">{{ item.title }}</h2>
											<p class="callouts-slider__item__text">{{ item.text }}</p>
											<div class="callouts-slider__item__image">
												{% if item.image.id %}
													<img src="{{ item.image.make.path }}" alt="{{ item.title }}">
												{% endif %}
											</div>
										</a>
									</li>
								{% endfor %}
							</ul>

						</div>
					</section>
				{% endif %}

			</div>
		</article>

	{% endfor %}
{% endif %}
