@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js

@@ -0,0 +1,243 @@
+import {Navigation, Pagination, Autoplay, EffectFade} from 'swiper/modules';
+// import Swiper and modules styles
+import 'swiper/css/bundle';
+// import 'swiper/css/navigation';
+// import 'swiper/css/pagination';
+
+export default function carouselmultilayoutv3Js(options = {}) {
+	try {
+		const {block} = options;
+		const totalSlides = block.querySelectorAll('.swiper-slide').length || 1;
+		Promise.all([getSwiperAssetsV2()]).then((values) => {
+			const {Swiper} = values[0][0];
+
+			const dataAttributes = block.dataset;
+			const slidesDesktop = Number(dataAttributes.desktopslides);
+			const slidesDesktopFull =
+				Number(dataAttributes.desktopslidesfull) || slidesDesktop;
+			const slidesTablet = Number(dataAttributes.tabletslides);
+			const slidesMobile = Number(dataAttributes.mobileslides);
+			const slidesOffsetDesktopBefore = Number(
+				dataAttributes.desktopslidesoffsetbefore
+			);
+			const slidesOffsetTabletBefore = Number(
+				dataAttributes.tabletslidesoffsetbefore
+			);
+			const slidesOffsetMobileBefore = Number(
+				dataAttributes.mobileslidesoffsetbefore
+			);
+			const slidesOffsetDesktopAfter = Number(
+				dataAttributes.desktopslidesoffsetafter
+			);
+			const slidesOffsetTabletAfter = Number(
+				dataAttributes.tabletslidesoffsetafter
+			);
+			const slidesOffsetMobileAfter = Number(
+				dataAttributes.mobileslidesoffsetafter
+			);
+			const loopSlides = Number(dataAttributes.loopslides) === 1;
+			const loopSlidesPortrait =
+				Number(dataAttributes.loopslidesportrait) === 1;
+			const loopSlidesMobile =
+				Number(dataAttributes.loopslidesmobile) === 1;
+
+			console.log(totalSlides > 1 ? loopSlides : false);
+
+			const spaceBetweenSlidesDesktop = Number(
+				dataAttributes.desktopspacebetweenslides
+			);
+			const spaceBetweenSlidesDesktopFull =
+				Number(dataAttributes.desktopfullspacebetweenslides) ||
+				spaceBetweenSlidesDesktop;
+			const spaceBetweenSlidesMobile = Number(
+				dataAttributes.mobilespacebetweenslides
+			);
+			const spaceBetweenSlidesTablet = Number(
+				dataAttributes.tabletspacebetweenslides
+			);
+			const autoplayCarousel = Number(dataAttributes.autoplay) === 1;
+			const centerActiveSlide =
+				Number(dataAttributes.centeractiveslide) === 1;
+			const centerActiveSlidePortrait =
+				Number(dataAttributes.centeractiveslideportrait) === 1;
+			const centerActiveSlideMobile =
+				Number(dataAttributes.centeractiveslidemobile) === 1;
+			const centerSlidesBounds =
+				Number(dataAttributes.centerslidesbounds) === 1;
+			const centerSlidesBoundsPortrait =
+				Number(dataAttributes.centerslidesboundsportrait) === 1;
+			const centerSlidesBoundsMobile =
+				Number(dataAttributes.centerslidesboundsmobile) === 1;
+			const centerInsufficientSlidesDesktop =
+				Number(dataAttributes.centerinsufficientslidesdesktop) === 1;
+			const centerInsufficientSlidesPortrait =
+				Number(dataAttributes.centerinsufficientslidesportrait) === 1;
+			const centerInsufficientSlidesMobile =
+				Number(dataAttributes.centerinsufficientslidesmobile) === 1;
+			const carouselEnableFreeMode =
+				Number(dataAttributes.enablefreemode) === 1;
+			const carouselEnableMousewheel =
+				Number(dataAttributes.enablemousewheel) === 1;
+			const delay = Number(dataAttributes.transitiondelay);
+			const speed = Number(dataAttributes.transitionspeed);
+			const transitionStyle =
+				dataAttributes.transitionstyle === 'default'
+					? ''
+					: dataAttributes.transitionstyle;
+			const paginationStyle =
+				dataAttributes.paginationstyle === 'customnumber'
+					? 'bullets'
+					: dataAttributes.paginationstyle;
+			const fractionStyle = dataAttributes.fractionstyle;
+			const fractionString = dataAttributes.fractionstring;
+			const fractionSetting =
+				fractionStyle === 'text'
+					? function (currentClass, totalClass) {
+							return (
+								'<span class="' +
+								currentClass +
+								'"></span> ' +
+								fractionString +
+								' <span class="' +
+								totalClass +
+								'"></span>'
+							);
+					  }
+					: false;
+			const customNumber =
+				dataAttributes.paginationstyle === 'customnumber'
+					? function (index, className) {
+							return (
+								'<div class="' +
+								className +
+								'"><span class="pagination-number">' +
+								'0' +
+								(index + 1) +
+								'</span></div>'
+							);
+					  }
+					: false;
+			const carouselmultilayoutv3Swiper = new Swiper(
+				block.querySelector('.swiper'),
+				{
+					modules: [
+						Navigation,
+						Pagination,
+						Autoplay,
+						EffectFade
+						// EffectCoverflow,
+						// EffectCreative,
+						// FreeMode,
+						// Mousewheel
+					],
+					slidesPerView: slidesMobile,
+					spaceBetween: spaceBetweenSlidesMobile,
+					loop: totalSlides > 1 ? loopSlidesMobile : false,
+					preloadImages: true,
+					watchSlidesVisibility: true,
+					effect: transitionStyle,
+					creativeEffect: {
+						prev: {
+							shadow: true,
+							translate: [0, 0, -400]
+						},
+						next: {
+							translate: ['100%', 0, 0]
+						}
+					},
+					coverflowEffect: {
+						rotate: 20,
+						depth: 50,
+						scale: 0.9,
+						modifier: 1,
+						slideShadows: true
+					},
+					fadeEffect: {
+						crossFade: true
+					},
+					lazy: {
+						loadPrevNext: true
+					},
+					speed,
+					autoplay: autoplayCarousel
+						? {
+								delay
+						  }
+						: '',
+					watchOverflow: true,
+					centeredSlides: centerActiveSlideMobile,
+					centerInsufficientSlides: centerInsufficientSlidesMobile,
+					centeredSlidesBounds: centerSlidesBoundsMobile,
+					freeMode: {
+						enabled: carouselEnableFreeMode,
+						sticky: carouselEnableFreeMode
+					},
+					mousewheel: carouselEnableMousewheel,
+					slidesOffsetBefore: slidesOffsetMobileBefore,
+					slidesOffsetAfter: slidesOffsetMobileAfter,
+					breakpoints: {
+						744: {
+							spaceBetween: spaceBetweenSlidesTablet,
+							slidesPerView: slidesTablet,
+							centeredSlides: centerActiveSlidePortrait,
+							centerInsufficientSlides:
+								centerInsufficientSlidesPortrait,
+							centeredSlidesBounds: centerSlidesBoundsPortrait,
+							slidesOffsetBefore: slidesOffsetTabletBefore,
+							slidesOffsetAfter: slidesOffsetTabletAfter,
+							loop: totalSlides > 1 ? loopSlidesPortrait : false
+						},
+						1024: {
+							slidesPerView: slidesDesktop,
+							spaceBetween: spaceBetweenSlidesDesktop,
+							centeredSlides: centerActiveSlide,
+							centerInsufficientSlides:
+								centerInsufficientSlidesDesktop,
+							centeredSlidesBounds: centerSlidesBounds,
+							slidesOffsetBefore: slidesOffsetDesktopBefore,
+							slidesOffsetAfter: slidesOffsetDesktopAfter,
+							loop: totalSlides > 1 ? loopSlides : false
+						},
+						1440: {
+							centeredSlides: centerActiveSlide,
+							centerInsufficientSlides:
+								centerInsufficientSlidesDesktop,
+							centeredSlidesBounds: centerSlidesBounds,
+							slidesPerView: slidesDesktopFull,
+							spaceBetween: spaceBetweenSlidesDesktopFull,
+							slidesOffsetBefore: slidesOffsetDesktopBefore,
+							slidesOffsetAfter: slidesOffsetDesktopAfter,
+							loop: totalSlides > 1 ? loopSlides : false
+						}
+					},
+					navigation: {
+						nextEl: block.querySelector('.swiper-button-next'),
+						prevEl: block.querySelector('.swiper-button-prev')
+					},
+					pagination: {
+						el: block.querySelector('.swiper-pagination'),
+						type: paginationStyle,
+						renderFraction: fractionSetting,
+						clickable: true,
+						renderBullet: customNumber
+					}
+				}
+			);
+		});
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+/**
+ * Dynamically retrieves the swiper css and js and returns a resolved promise when they have both been successfully fetched.
+ * @returns {promise}
+ */
+function getSwiperAssetsV2(options = {css: 'bundle'}) {
+	const getSwiperJs = () => import(/* webpackChunkName: 'swiper' */ 'swiper');
+
+	const promisedJs = Promise.all([getSwiperJs()]).then((values) => {
+		return values;
+	});
+	return promisedJs;
+}

package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss

@@ -0,0 +1,156 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-element-positioning-v3/element-positioning-v3';
+@use '../../breakpoints';
+// @use 'NodeModules/swiper/swiper-bundle.min.css';
+@layer base-styles {
+	.carousel-multi-layout-v3 {
+		display: grid;
+		grid-template: 'main' / 1fr;
+		overflow-x: var(--block-overflow, hidden);
+		width: 100%;
+		position: relative;
+		background-color: var(--carousel-bg-colour);
+
+		&__inner-container {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			display: grid;
+			grid-area: main;
+			grid-template: 'main'/1fr;
+		}
+		&__swiper-carousel-container {
+			width: 100%;
+			height: 100%;
+			grid-area: main;
+			inset: 0;
+			.swiper-wrapper {
+				height: 100%;
+			}
+		}
+
+		.swiper-button-disabled {
+			pointer-events: none;
+			opacity: 0;
+		}
+
+		.swiper-button-prev {
+			left: var(--left-arrow-horizontally-mobile);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				left: var(--left-arrow-horizontally-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				left: var(--left-arrow-horizontally-desktop);
+			}
+		}
+		.swiper-button-next {
+			right: var(--right-arrow-horizontally-mobile);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				right: var(--right-arrow-horizontally-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				right: var(--right-arrow-horizontally-desktop);
+			}
+		}
+
+		.swiper-button-next,
+		.swiper-button-prev {
+			top: var(--arrows-position-vertically-mobile);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				top: var(--arrows-position-vertically-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				top: var(--arrows-position-vertically-desktop);
+			}
+			&::after {
+				--swiper-navigation-size: #{core-functions-v3.fluidSize(
+						var(--arrows-size-mobile),
+						'mobile'
+					)};
+				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+					--swiper-navigation-size: #{core-functions-v3.fluidSize(
+							var(--arrows-size-portrait),
+							'portrait'
+						)};
+				}
+				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+					--swiper-navigation-size: #{core-functions-v3.fluidSize(
+							var(--arrows-size-desktop),
+							'desktop'
+						)};
+				}
+				text-rendering: auto;
+				color: var(--swiper-arrow-colour);
+			}
+		}
+
+		.custom_arrow {
+			height: auto;
+			width: core-functions-v3.fluidSize(
+				var(--custom-arrows-size-mobile),
+				'mobile'
+			);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: core-functions-v3.fluidSize(
+					var(--custom-arrows-size-portrait),
+					'portrait'
+				);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: core-functions-v3.fluidSize(
+					var(--custom-arrows-size-desktop),
+					'desktop'
+				);
+			}
+		}
+
+		.swiper-pagination-bullets.swiper-pagination-horizontal {
+			bottom: unset;
+			left: unset;
+			width: unset;
+		}
+		.swiper-pagination {
+			@include element-positioning-v3.elementPositioning();
+		}
+
+		.swiper-pagination-bullet {
+			background-color: transparent;
+		}
+
+		.swiper-pagination-bullet-active {
+			background-color: var(--swiper-pagination-colour);
+		}
+
+		.swiper-pagination-fraction {
+			color: var(--swiper-pagination-colour);
+		}
+
+		.swiper-slide {
+			opacity: var(--next-and-prev-slide-opacity-mobile);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				opacity: var(--next-and-prev-slide-opacity-portrait);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				opacity: var(--next-and-prev-slide-opacity-desktop);
+			}
+		}
+
+		.swiper-slide-active {
+			opacity: unset;
+		}
+
+		.swiper-button-next,
+		.swiper-button-prev {
+			display: var(--display-arrows-mobile);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				display: var(--display-arrows-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				display: var(--display-arrows-desktop);
+			}
+		}
+	}
+}

package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.twig

@@ -0,0 +1,146 @@
+{% set blockClassName = "carousel-multi-layout-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, environment, is_preview, nav_menus }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+
+
+{% set blockOverflow = '--block-overflow:' ~ fields.block_overflow|ru ~ ';' %}
+
+{% set arrowColour = '--swiper-arrow-colour:' ~ fields.carousel_nav_arrow_colour|ru ~ ';' %}
+{% set paginationColour = '--swiper-pagination-colour:' ~ fields.carousel_pagination_colour|ru ~ ';' %}
+{% set carouselBackgroundColour = '--carousel-bg-colour:' ~ fields.background_colour|default(fields.carousel_background_colour) ~ ';' %}
+
+{% set customArrowImageLeft = get_image(fields.custom_arrow_image_left) %}
+{% set customArrowImageRight = get_image(fields.custom_arrow_image_right) %}
+{% set customArrowsSizeDesktop = '--custom-arrows-size-desktop: ' ~ fields.custom_arrows_size_desktop ~ ';' %}
+{% set customArrowsSizePortrait = '--custom-arrows-size-portrait:' ~ fields.custom_arrows_size_portrait ~ ';' %}
+{% set customArrowsSizeMobile = '--custom-arrows-size-mobile:' ~ fields.custom_arrows_size_mobile ~ ';' %}
+
+{% if fields.show_advanced_offset_controls == true %}
+	{% set carousel_slides_offset_before_desktop = fields.advanced_slide_offset.slides_offset_before_desktop %}
+	{% set carousel_slides_offset_before_tablet = fields.advanced_slide_offset.slides_offset_before_tablet %}
+	{% set carousel_slides_offset_before_mobile = fields.advanced_slide_offset.slides_offset_before_mobile %}
+	{% set carousel_slides_offset_after_desktop = fields.advanced_slide_offset.slides_offset_after_desktop %}
+	{% set carousel_slides_offset_after_tablet = fields.advanced_slide_offset.slides_offset_after_tablet %}
+	{% set carousel_slides_offset_after_mobile = fields.advanced_slide_offset.slides_offset_after_mobile %}
+{% else %}
+	{% set carousel_slides_offset_before_desktop = fields.carousel_slides_offset_desktop %}
+	{% set carousel_slides_offset_before_tablet = fields.carousel_slides_offset_tablet %}
+	{% set carousel_slides_offset_before_mobile = fields.carousel_slides_offset_mobile %}
+	{% set carousel_slides_offset_after_desktop = fields.carousel_slides_offset_desktop %}
+	{% set carousel_slides_offset_after_tablet = fields.carousel_slides_offset_tablet %}
+	{% set carousel_slides_offset_after_mobile = fields.carousel_slides_offset_mobile %}
+{% endif %}
+
+{% set nextPrevSlideOpacityDesktop = '--next-and-prev-slide-opacity-desktop:' ~ fields.next_and_prev_slide_opacity_desktop ~ ';' %}
+{% set nextPrevSlideOpacityPortrait = '--next-and-prev-slide-opacity-portrait:' ~ fields.next_and_prev_slide_opacity_portrait ~ ';' %}
+{% set nextPrevSlideOpacityMobile = '--next-and-prev-slide-opacity-mobile:' ~ fields.next_and_prev_slide_opacity_mobile ~ ';' %}
+{% set arrowsPosVertDesktop = '--arrows-position-vertically-desktop: ' ~ fields.arrows_position_vertically_desktop ~ '%;' %}
+{% set leftArrowHorizDesktop = '--left-arrow-horizontally-desktop: ' ~ fields.left_arrow_horizontally_desktop ~ '%;' %}
+{% set rightArrowHorizDesktop = '--right-arrow-horizontally-desktop: ' ~ fields.right_arrow_horizontally_desktop ~ '%;' %}
+{% set arrowsPosVertPortrait = '--arrows-position-vertically-portrait: ' ~ fields.arrows_position_vertically_portrait ~ '%;' %}
+{% set leftArrowHorizPortrait = '--left-arrow-horizontally-portrait: ' ~ fields.left_arrow_horizontally_portrait ~ '%;' %}
+{% set rightArrowHorizPortrait = '--right-arrow-horizontally-portrait: ' ~ fields.right_arrow_horizontally_portrait ~ '%;' %}
+{% set arrowsPosVertMobile = '--arrows-position-vertically-mobile: ' ~ fields.arrows_position_vertically_mobile ~ '%;' %}
+{% set leftArrowHorizMobile = '--left-arrow-horizontally-mobile: ' ~ fields.left_arrow_horizontally_mobile ~ '%;' %}
+{% set rightArrowHorizMobile = '--right-arrow-horizontally-mobile: ' ~ fields.right_arrow_horizontally_mobile ~ '%;' %}
+{% set paginationPosOffsetDesktop = '--pagination-position-offset-desktop: ' ~ fields.pagination_position_offset_desktop ~ '%;' %}
+{% set paginationPosOffsetPortrait = '--pagination-position-offset-portrait: ' ~ fields.pagination_position_offset_portrait ~ '%;' %}
+{% set paginationPosOffsetMobile = '--pagination-position-offset-mobile: ' ~ fields.pagination_position_offset_mobile ~ '%;' %}
+{% set arrowsSizeDesktop = '--arrows-size-desktop: ' ~ fields.arrows_size_desktop ~ ';' %}
+{% set arrowsSizePortrait = '--arrows-size-portrait:' ~ fields.arrows_size_portrait ~ ';' %}
+{% set arrowsSizeMobile = '--arrows-size-mobile:' ~ fields.arrows_size_mobile ~ ';' %}
+
+{% set display = 'flex' %}
+{% set showArrowsDesktop = '--display-arrows-desktop:' ~ display ~ ';' %}
+{% set showArrowsPortrait = '--display-arrows-portrait:' ~ display ~ ';' %}
+{% set showArrowsMobile = '--display-arrows-mobile:' ~ display ~ ';' %}
+{% if fields.button_visibility %}
+	{% set showOnDesktop = '--display-arrows-desktop: ' ~ (fields.button_visibility.desktop ? 'display' : 'none') ~ ';' %}
+	{% set showOnPortrait = '--display-arrows-portrait: ' ~ (fields.button_visibility.portrait ? 'display' : 'none') ~ ';' %}
+	{% set showOnMobile = '--display-arrows-mobile: ' ~ (fields.button_visibility.mobile  ? 'display' : 'none') ~  ';' %}
+{% endif %}
+
+{% set paginationColor = '--swiper-pagination-color:' ~ fields.carousel_pagination_colour|ru ~ ';' %}
+{% set paginationInactiveColour = '--swiper-pagination-bullet-inactive-color:' ~ fields.carousel_pagination_inactive_colour|ru ~ ';' %}
+{% set paginationActiveBulletOpacity = '--swiper-pagination-bullet-opacity:' ~ fields.carousel_pagination_active_bullet_opacity|ru ~ ';' %}
+{% set paginationInactiveBulletOpacity = '--swiper-pagination-bullet-inactive-opacity:' ~ fields.carousel_pagination_inactive_bullet_opacity|ru ~ ';' %}
+{% set paginationBulletWidth = '--swiper-pagination-bullet-width:' ~ fields.carousel_pagination_bullet_width|ru ~ 'px;' %}
+{% set paginationBulletHeight = '--swiper-pagination-bullet-height:' ~ fields.carousel_pagination_bullet_height|ru ~ 'px;' %}
+{% set paginationBulletHorizontalGap = '--swiper-pagination-bullet-horizontal-gap:' ~ fields.carousel_pagination_bullet_horizontal_gap|ru ~ 'px;' %}
+
+{% set carouselPaginationStyle = fields.carousel_pagination_style|default('bullets')|ru %}
+{% set fractionStyle = 'data-fractionstyle="' ~ fields.fraction_style|ru ~ '"' %}
+{% set fractionString = 'data-fractionstring="' ~ fields.fraction_text|ru ~ '"' %}
+
+{% set sectionStyles =  styleEntryPoint ~ blockBorderRadius ~ blockOverflow ~ arrowColour ~ paginationColour ~ paginationInactiveColour ~ paginationActiveBulletOpacity ~ paginationInactiveBulletOpacity ~ paginationBulletWidth ~ paginationBulletHeight ~ paginationBulletHorizontalGap ~ arrowColour ~ paginationColor ~ carouselBackgroundColour ~ nextPrevSlideOpacityDesktop ~ nextPrevSlideOpacityPortrait ~ nextPrevSlideOpacityMobile ~ arrowsPosVertDesktop ~ leftArrowHorizDesktop ~ rightArrowHorizDesktop ~ arrowsPosVertPortrait ~ leftArrowHorizPortrait ~ rightArrowHorizPortrait ~ arrowsPosVertMobile ~ leftArrowHorizMobile ~ rightArrowHorizMobile ~ paginationPosOffsetDesktop ~ paginationPosOffsetPortrait ~ paginationPosOffsetMobile ~ arrowsSizeDesktop ~ arrowsSizePortrait ~ arrowsSizeMobile ~ customArrowsSizeDesktop ~ customArrowsSizePortrait ~ customArrowsSizeMobile ~ showOnDesktop ~ showOnPortrait ~ showOnMobile %}
+
+{% set centerInsufficientSlidesDesktop = 'data-centerinsufficientslidesdesktop="'  ~ fields.center_insufficient_slides_desktop ~ '"' %}
+{% set centerInsufficientSlidesPortrait = 'data-centerinsufficientslidesportrait="' ~ fields.center_insufficient_slides_portrait ~ '"' %}
+{% set centerInsufficientSlidesMobile = 'data-centerinsufficientslidesmobile="' ~ fields.center_insufficient_slides_mobile ~ '"' %}
+
+{% set autoplay = 'data-autoplay="' ~ fields.carousel_autoslide ~ '"' %}
+{% set freeMode = 'data-enablefreemode="' ~ fields.enable_freemode ~ '"' %}
+{% set mouseWheel = 'data-enablemousewheel="' ~ fields.enable_mousewheel ~ '"' %}
+{% set transitionDelay = 'data-transitiondelay="' ~ fields.carousel_transition_delay ~ '"' %}
+{% set transitionSpeed = 'data-transitionspeed="' ~ fields.carousel_transition_speed ~ '"' %}
+{% set transitionStyle = 'data-transitionstyle="' ~ fields.carousel_transition_style|ru ~ '"' %}
+
+{% set mobileSlides = 'data-mobileslides="' ~ fields.carousel_number_of_slides_mobile ~ '"' %}
+{% set tabletSlides = 'data-tabletslides="' ~ fields.carousel_number_of_slides_tablet ~ '"' %}
+{% set desktopSlides = 'data-desktopslides="' ~ fields.carousel_number_of_slides_desktop ~ '"' %}
+{% set desktopFullSlides = 'data-desktopslidesfull="' ~ fields.number_of_slides_on_desktop_full|default(fields.carousel_number_of_slides_desktop) ~ '"' %}
+
+{% set imageSizes = '(min-width: 1440px) ' ~ (100 / fields.carousel_number_of_slides_desktop|default(1))|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.carousel_number_of_slides_desktop|default(1))|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.carousel_number_of_slides_tablet|default(1))|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.carousel_number_of_slides_mobile|default(1))|round ~ 'vw, 100vw' %}
+
+
+{% set sectionDataAttributes = dataAttributeEntryPoint ~ centerInsufficientSlidesDesktop ~ centerInsufficientSlidesPortrait ~ centerInsufficientSlidesMobile ~ autoplay ~ freeMode ~ mouseWheel ~ transitionDelay ~ transitionSpeed ~ transitionStyle ~ fractionStyle ~ fractionString ~ mobileSlides ~ tabletSlides ~ desktopSlides ~ desktopFullSlides %}
+
+{{previewEntryPoint}}
+
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+		{{positionVars}}
+	}
+</style>
+
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class=" {{ blockClassName }} lazy-fade {{block.id}} {{block.section_class}} {{classNameEntryPoint}}" {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopfullspacebetweenslides="{{fields.space_between_slides_desktop_full}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-centerslidesbounds="{{fields.center_slides_bounds}}" data-centerslidesboundsportrait="{{fields.center_slides_bounds_portrait}}" data-centerslidesboundsmobile="{{fields.center_slides_bounds_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
+
+	{% set arrowData = fields %}
+	<div class="{{ blockClassName }}__inner-container">
+		<div class="swiper {{ blockClassName }}__swiper-carousel-container">
+			<div class="swiper-wrapper" data-pattern-repeater-parent="1">
+				{% for slide in fields.slides %}
+					{% if block %}
+						{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ loop.index }) %}
+					{% endif %}
+					<div class="swiper-slide {{ blockClassName }}__slide" data-pattern-repeater-child="1">
+						{{ include("blocks/" ~ slide.acf_fc_layout|replace({"_" : "-"}) ~ ".twig", {fields: slide, block, options, nav_menus, cta_styles, market_slug, imageSizes }, with_context = false, ignore_missing = true) }}
+					</div>
+				{% endfor %}
+			</div>
+		</div>
+
+		{% set positionVars = include('components/element-positioning-v3.twig', { fields, block, blockClassName, is_preview}, with_context = false) %}
+
+		{% if fields.carousel_pagination %}
+			<style>
+				.swiper-pagination.{{block.id}}{
+					{{positionVars}}
+				}
+			</style>
+			<div class="swiper-pagination {{block.id}}"></div>
+		{% endif %}
+
+		{% if fields.enable_carousel_nav_arrows and fields.enable_custom_arrows == false %}
+			<div class="{{ blockClassName }}__button-prev swiper-button-prev"></div>
+			<div class="{{ blockClassName }}__button-next swiper-button-next"></div>
+		{% elseif fields.enable_carousel_nav_arrows and fields.enable_custom_arrows %}
+			<img class="swiper-button-prev custom_arrow" src="{{customArrowImageLeft.src}}" alt="{{customArrowImageLeft.alt}}">
+			<img class="swiper-button-next custom_arrow" src="{{customArrowImageRight.src}}" alt="{{customArrowImageRight.alt}}">
+		{% endif %}
+	</div>
+</section>