{% if oct_slideshows_plus %}
	<div class="mt-4 main-slideshow d-flex flex-column gap-3{% if slider_with_megamenu %} menu-active{% endif %}{% if paginations_status %} with-pagination{% endif %}">
		<div class="pr-slideshow-plus">
			<div id="slideshow-plus-{{ module }}" class="swiper main-slideshow-swiper{% if slider_type == 1 %} pr-slideshow-items-vertical{% endif %}">
				{% set key = 0 %}
				<div class="pr-slideshow-plus-slides swiper-wrapper{% if slider_type == 1 %} swiper-wrapper-grid{% endif %}">
					{% for item_slide in oct_slideshows_plus %}
						{% set key = key + 1 %}
						<div class="{% if not full_img %}content-block pr-slideshow-plus-slide pr-slideshow-plus-item_{{ key }}{% if slider_type == 2 %} pr-slideshow-plus-slide-horizontal h-auto{% else %} pr-slideshow-item-vertical h-auto{% endif %}{% else %}pr-slideshow-item-full-img{% endif %} swiper-slide">
							{% if full_img and item_slide.mobile_image %}
								<div class="pr-slideshow-plus-item-fullimg h-100">
									<a href="{{ item_slide.link }}" title="{{ item_slide.title }}">
										<picture>
											<source srcset="{{ item_slide.mobile_image }}" media="(max-width: 767px)">
											<source srcset="{{ item_slide.image }}">
											<img class="img-fluid br-4" src="{{ item_slide.image }}" alt="{{ item_slide.title }}" {% if oct_isMobile is defined %}width="{{ item_slide.mobile_width }}" height="{{ item_slide.mobile_height }}"{% else %}width="{{ item_slide.image_width }}" height="{{ item_slide.image_height }}"{% endif %}{% if key > 1 %} loading="lazy"{% endif %}>
										</picture>
									</a>
								</div>
							{% else %}
								<div class="pr-slideshow-plus-slide-info pb-5">
									<div class="pr-slideshow-plus-slide-text">
										<div class="pr-slideshow-plus-slide-title fsz-24 fw-600 white-text">{{ item_slide.title }}</div>
										<p class="fsz-20 grey-text mt-3 mb-5">{{ item_slide.description }}</p>
									</div>
									<a href="{{ item_slide.link }}" class="button button-secondary button-large mt-5">{{ item_slide.button }}</a>
								</div>
								<img src="{{ item_slide.image }}" alt="{{ item_slide.title }}" width="{{ item_slide.image_width }}" height="{{ item_slide.image_height }}"{% if key > 1 %} loading="lazy"{% endif %} class="position-absolute">
								<style>
									{% if item_slide.background_color %}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} {background-color: {{ item_slide.background_color }};}
									{% endif %}
									{% if item_slide.title_color %}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .pr-slideshow-plus-slide-title {color: {{ item_slide.title_color }};}
									{% endif %}
									{% if item_slide.text_color %}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .pr-slideshow-plus-slide-text p {color: {{ item_slide.text_color }};}
									{% endif %}
									{% if item_slide.button_color and item_slide.button_background %}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .button {border-color: {{ item_slide.button_background }};}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .button {color: {{ item_slide.button_color }};}
									{% endif %}
									{% if item_slide.button_color_hover and item_slide.button_background_hover %}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .button:hover {background-color: {{ item_slide.button_background_hover }}; border-color: {{ item_slide.button_background_hover }};}
									#slideshow-plus-{{ module }} .pr-slideshow-plus-item_{{ key }} .button:hover {color: {{ item_slide.button_color_hover }};}
									{% endif %}
								</style>
							{% endif %}
						</div>
					{% endfor %}
				</div>
				{% if paginations_status %}
					<div class="swiper-pagination swiper-pagination-{{ module }}"></div>
				{% endif %}
				{% if arrows_status %}
					<div class="swiper-button-prev p-2 swiper-button-prev-{{ module }}">
						<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 6 8" fill="none">
							<path d="M4.5 1L1.5 4L4.5 7" stroke="#9DA4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</div>
					<div class="swiper-button-next p-2 swiper-button-next-{{ module }}">
						<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8" viewBox="0 0 6 8" fill="none">
							<path d="M1.5 7L4.5 4L1.5 1" stroke="#9DA4AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</div>
				{% endif %}
			</div>
		</div>
		{% if oct_mini_banners %}
			<div class="pr-slideshow-plus-banners overflow-hidden">
				<div class="swiper pr-slideshow-plus-banners-swiper">
					<div class="swiper-wrapper">
						{% for mini_banner in oct_mini_banners %}
						<div class="swiper-slide">
							<div class="slide-inner">
								<a href="{{ mini_banner.link }}" title="{{ mini_banner.title }}">
									<div class="slide-content" style="background-color: {{ mini_banner.background_color }};">
										<div class="slide-text" style="color: {{ mini_banner.text_color }};">
											<div class="slide-title fw-700">{{ mini_banner.title }}</div>
											<div class="slide-price fw-500">{{ mini_banner.subtitle }}</div>
										</div>
										<img class="slide-image" src="{{ mini_banner.mini_image }}" alt="{{ mini_banner.title }}" width="200" height="200">
									</div>
								</a>
							</div>
						</div>
						{% endfor %}
					</div>
				</div>
			</div>
		{% endif %}
		<script>
			window.addEventListener('DOMContentLoaded', () => {
				{% if full_img and oct_slideshows_plus[0].mobile_image %}
					var mainSlideshowSwiper = new Swiper('#slideshow-plus-{{ module }}', {
						slidesPerView: {% if slider_type == 1 %}1.2{% else %}1{% endif %},
						breakpoints: {
							1200: {
								slidesPerView: {% if slider_type == 1 %}3.3{% else %}1{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 4 %}true{% else %}false{% endif %},
								{% endif %}
							},
							1024: {
								slidesPerView: {% if slider_type == 1 %}2.5{% else %}1{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 3 %}true{% else %}false{% endif %},
								{% endif %}
							},
							768: {
								slidesPerView: {% if slider_type == 1 %}1.2{% else %}1{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 2 %}true{% else %}false{% endif %},
								{% endif %}
							}
						},
						spaceBetween: 16,
						speed: 1000,
						loop: true,
						{% if autoplay_status %}
							autoplay:  {
								delay: 8000,
								pauseOnMouseEnter: true,
							},
						{% endif %}
						{% if paginations_status %}
							pagination: {
								el: '.swiper-pagination',
								clickable: true,
							},
						{% endif %}
						{% if arrows_status %}
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
						{% endif %}
					});
				{% else %}
					var mainSlideshowSwiper = new Swiper('#slideshow-plus-{{ module }}', {
						slidesPerView: {% if slider_type == 1 %}1.2{% else %}1.2{% endif %},
						breakpoints: {
							1400: {
								slidesPerView: {% if slider_type == 1 %}3.3{% else %}1.3{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 4 %}true{% else %}false{% endif %},
								{% endif %}
							},
							1024: {
								slidesPerView: {% if slider_type == 1 %}2.5{% else %}1.3{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 3 %}true{% else %}false{% endif %},
								{% endif %}
							},
							768: {
								slidesPerView: {% if slider_type == 1 %}1.2{% else %}1.3{% endif %},
								{% if slider_type == 1 %}
									loop: {% if oct_slideshows_plus|length > 2 %}true{% else %}false{% endif %},
								{% endif %}
							}
						},
						spaceBetween: 16,
						speed: 1000,
						loop: {% if oct_slideshows_plus|length > 4 %}true{% else %}false{% endif %},
						{% if autoplay_status %}
						autoplay:  {
							delay: 8000,
							pauseOnMouseEnter: true,
						},
						{% endif %}
						{% if paginations_status %}
							pagination: {
								el: '.swiper-pagination',
								clickable: true,
							},
						{% endif %}
						{% if arrows_status %}
							navigation: {
								nextEl: '.swiper-button-next',
								prevEl: '.swiper-button-prev',
							},
						{% endif %}
					});
				{% endif %}

				var bannersSlideshowSwiper = new Swiper('.pr-slideshow-plus-banners-swiper', {
					slidesPerView: 5.5,
					spaceBetween: 16,
					loop: true,
					autoplay: {
						delay: 4000,
						pauseOnMouseEnter: true,
					},
					freeMode: true,
					breakpoints: {
						320: {
							slidesPerView: 1.8,
						},
						420: {
							slidesPerView: 2.2,
						},
						576: {
							slidesPerView: 3.2,
						},
						768: {
							slidesPerView: 4.4,
						},
						992: {
							slidesPerView: 5.5,
						},
						1200: {
							slidesPerView: 3.5,
						},
						1400: {
							slidesPerView: 4.5,
						},
						1600: {
							slidesPerView: 5.5,
						},
					},
				});
			});
		</script>
	</div>
{% endif %}
