@total_onion/onion-library 1.0.0

package/components/block-carousel-multi-layout-v2/carousel-multi-layout-v2-extra.js

@@ -0,0 +1 @@
+export default function (block) {}

package/components/block-carousel-multi-layout-v2/carousel-multi-layout-v2-extra.scss

@@ -0,0 +1,5 @@
+// @use 'Assets/scss/theme/mixins';
+// @use 'Assets/scss/theme/breakpoints';
+// @use 'Assets/scss/theme/fonts';
+// @use 'Assets/scss/theme/buttons';
+@mixin additionalStyles {}

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

@@ -0,0 +1,223 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+import {getSwiperAssetsV2} from '@pernod-ricard-global-cms/jsutils';
+import lazyloader from '@pernod-ricard-global-cms/cbllazyloader';
+import extraJs from 'Assets/js/blocks/carousel-multi-layout-v2/carousel-multi-layout-v2-extra.js';
+import jsAssets from 'Assets/js/modules/jsAssets';
+import('swiper/css/bundle');
+
+export default function carouselmultilayoutv2Js(options = {}) {
+	try {
+		const {block} = options;
+		Promise.all([getSwiperAssetsV2()]).then((values) => {
+			const {
+				Swiper,
+				Navigation,
+				Pagination,
+				Lazy,
+				Autoplay,
+				EffectFade,
+				EffectCoverflow,
+				EffectCreative,
+				FreeMode,
+				Mousewheel
+			} = values[0][0];
+
+			const dataAttributes = block.dataset;
+			const slidesDesktop = Number(dataAttributes.desktopslides);
+			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;
+			const spaceBetweenSlidesDesktop = Number(
+				dataAttributes.desktopspacebetweenslides
+			);
+			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 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;
+			// console.log(paginationStyle);
+			const carouselmultilayoutv2Swiper = new Swiper(
+				block.querySelector('.swiper'),
+				{
+					modules: [
+						Navigation,
+						Pagination,
+						Lazy,
+						Autoplay,
+						EffectFade,
+						EffectCoverflow,
+						EffectCreative,
+						FreeMode,
+						Mousewheel
+					],
+					slidesPerView: slidesMobile,
+					spaceBetween: spaceBetweenSlidesMobile,
+					loop: loopSlidesMobile,
+					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,
+					freeMode: {
+						enabled: carouselEnableFreeMode,
+						sticky: carouselEnableFreeMode
+					},
+					mousewheel: carouselEnableMousewheel,
+					slidesOffsetBefore: slidesOffsetMobileBefore,
+					slidesOffsetAfter: slidesOffsetMobileAfter,
+					breakpoints: {
+						744: {
+							spaceBetween: spaceBetweenSlidesTablet,
+							slidesPerView: slidesTablet,
+							centeredSlides: centerActiveSlidePortrait,
+							centerInsufficientSlides:
+								centerInsufficientSlidesPortrait,
+
+							slidesOffsetBefore: slidesOffsetTabletBefore,
+							slidesOffsetAfter: slidesOffsetTabletAfter,
+							loop: loopSlidesPortrait
+						},
+						1024: {
+							slidesPerView: slidesDesktop,
+							spaceBetween: spaceBetweenSlidesDesktop,
+							centeredSlides: centerActiveSlide,
+							centerInsufficientSlides:
+								centerInsufficientSlidesDesktop,
+							slidesOffsetBefore: slidesOffsetDesktopBefore,
+							slidesOffsetAfter: slidesOffsetDesktopAfter,
+							loop: loopSlides
+						}
+					},
+					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
+					}
+				}
+			);
+			carouselmultilayoutv2Swiper.on('slideChange', () => {
+				setTimeout(() => {
+					lazyloader.options.assetArray = jsAssets.dynamicAssets;
+					lazyloader.lazyloaderInit();
+				}, 1);
+			});
+			extraJs(block);
+		});
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/block-carousel-multi-layout-v2/carousel-multi-layout-v2.php

@@ -0,0 +1,17 @@
+<?php
+
+acf_register_block_type(
+    array(
+        'name'            => 'carousel-multi-layout-v2',
+        'title'           => __('Carousel multi layout v2', 'Global theme Admin'),
+        'render_callback' => 'athena_block_render_post_object',
+        'category'        => 'common',
+        'icon'            => get_svg_icon_content('brick.svg'),
+        'keywords'        => array('content', 'text'),
+        'mode'            => 'preview',
+        'supports'        => array(
+            'align'  => false,
+            'anchor' => true,
+        ),
+    )
+);

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

@@ -0,0 +1,155 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/blocks/carousel-multi-layout-v2/carousel-multi-layout-v2-extra';
+@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+@use 'Assets/scss/theme/breakpoints';
+@use 'Assets/scss/modules/library-modules/element-positioning/element-positioning';
+
+.carousel-multi-layout-v2 {
+	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.device(breakpoints.$tabPortrait) {
+			left: var(--left-arrow-horizontally-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			left: var(--left-arrow-horizontally-desktop);
+		}
+	}
+	.swiper-button-next {
+		right: var(--right-arrow-horizontally-mobile);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			right: var(--right-arrow-horizontally-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			right: var(--right-arrow-horizontally-desktop);
+		}
+	}
+
+	.swiper-button-next,
+	.swiper-button-prev {
+		top: var(--arrows-position-vertically-mobile);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			top: var(--arrows-position-vertically-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			top: var(--arrows-position-vertically-desktop);
+		}
+		&::after {
+			--swiper-navigation-size: #{core-functions.fluidSize(
+					var(--arrows-size-mobile),
+					'mobile'
+				)};
+			@include core-mixins.device(breakpoints.$tabPortrait) {
+				--swiper-navigation-size: #{core-functions.fluidSize(
+						var(--arrows-size-portrait),
+						'portrait'
+					)};
+			}
+			@include core-mixins.device(breakpoints.$tabLandscape) {
+				--swiper-navigation-size: #{core-functions.fluidSize(
+						var(--arrows-size-desktop),
+						'desktop'
+					)};
+			}
+			text-rendering: auto;
+			color: var(--swiper-arrow-colour);
+		}
+	}
+
+	.custom_arrow {
+		height: auto;
+		width: core-functions.fluidSize(
+			var(--custom-arrows-size-mobile),
+			'mobile'
+		);
+		@include core-mixins.device(breakpoints.$tabPortrait) {
+			width: core-functions.fluidSize(
+				var(--custom-arrows-size-portrait),
+				'portrait'
+			);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			width: core-functions.fluidSize(
+				var(--custom-arrows-size-desktop),
+				'desktop'
+			);
+		}
+	}
+
+	.swiper-pagination-bullets.swiper-pagination-horizontal {
+		bottom: unset;
+		left: unset;
+		width: unset;
+	}
+	.swiper-pagination {
+		@include element-positioning.elementPositioning();
+	}
+
+	.swiper-pagination-bullet {
+		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.device(breakpoints.$tabPortrait) {
+			opacity: var(--next-and-prev-slide-opacity-portrait);
+		}
+
+		@include core-mixins.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.device(breakpoints.$tabPortrait) {
+			display: var(--display-arrows-portrait);
+		}
+		@include core-mixins.device(breakpoints.$tabLandscape) {
+			display: var(--display-arrows-desktop);
+		}
+	}
+
+	@include carousel-multi-layout-v2-extra.additionalStyles();
+}

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

@@ -0,0 +1,137 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% set blockClassName = "carousel-multi-layout-v2" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html.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.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 imageSizes = '(min-width: 1440px) ' ~ (100 / fields.carousel_number_of_slides_desktop)|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.carousel_number_of_slides_desktop)|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.carousel_number_of_slides_tablet)|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.carousel_number_of_slides_mobile)|round ~ 'vw, 100vw' %}
+
+
+{% set sectionDataAttributes = dataAttributeEntryPoint ~ centerInsufficientSlidesDesktop ~ centerInsufficientSlidesPortrait ~ centerInsufficientSlidesMobile ~ autoplay ~ freeMode ~ mouseWheel ~ transitionDelay ~ transitionSpeed ~ transitionStyle ~ fractionStyle ~ fractionString ~ mobileSlides ~ tabletSlides ~ desktopSlides %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{block.className}} {{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-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-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.twig', { fields, block, blockClassName, is_preview}, with_context = false) %}
+
+		{% if fields.carousel_pagination %}
+			<div class="swiper-pagination" style="{{positionVars}}"></div>
+		{% endif %}
+		{% if fields.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.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>