<conciergerieCarousel>

	<div class="carousel__tag">
		<div class="owl-carousel owl-theme conciergerie__carousel"
			data-reveal="true"
			data-dots="true">
			<a class="item"
				each={
				items
				}
				href="{url}">

				<div class="carousel__image">
					<img srcset="
								{opts.imgCacheDir}w400/{image} 400w,
								{opts.imgCacheDir}w600/{image} 600w,
								{opts.imgCacheDir}w800/{image} 800w,
								{opts.imgCacheDir}w900/{image} 900w,
								"
						src="{opts.imgCacheDir}w400/{image}"
						loading="lazy" />
				</div>

				<div class="widget_carousel_text_container">
					<div class="widget_carousel_text">
						<p class="widget_carousel_text_title">{ title }</p>


					</div>
				</div>
			</a>
		</div>

		<a href="#"
			class="navBtn customPrevBtn"
			id="conciergerie-carousel__btn-prev">
			<svg>
				<polyline points="7,12 17,25 27,12"
					stroke="{ arrow_color }"
					stroke-width="{ arrow_stroke_width }"
					fill="none" />
			</svg>


		</a>

		<a href="#"
			class="navBtn customNextBtn"
			id="conciergerie-carousel__btn-next">
			<svg>
				<polyline points="7,12 17,25 27,12"
					stroke="{ arrow_color }"
					stroke-width="{ arrow_stroke_width }"
					fill="none" />
			</svg>


		</a>

	</div>

	<script>
		var self = this;
		opts.imgCacheDir = img_cache_dir;
		self.items = [];
		self.loaded = false;

		this.arrow_color = '#efefef';
		if (typeof opts.arrow_color !== 'undefined') {
			this.arrow_color = opts.arrow_color;
		}

		this.arrow_stroke_width = 2;
		if (typeof opts.arrow_stroke_width !== 'undefined') {
			this.arrow_stroke_width = opts.arrow_stroke_width;
		}

		if (typeof opts.numSlides === 'undefined') {

			opts.numSlides = {
				0: {
					items: 1,

				},
				600: {
					items: 2,

				},
				1200: {
					items: 3,

				}
			};

		}

		if (typeof opts.autoplay === "undefined") {
			opts.autoplay = true;
		}

		if (typeof opts.center === 'undefined') {
			opts.center = false;
		}

		this.on('mount', function () {

			load();

			$(window).on('load scroll touchmove', function () {
				if (!self.loaded) {
					load();
				}
			});


		});

		function load() {

			var inView = $('conciergerieCarousel').inView();

			if (inView) {
				self.loaded = true;
				loadItems();
			}

		}

		function loadItems() {

			$.getJSON('/' + curLang + '/conciergerie_services/getConciergerieServices', function (data) {

				var items = [];
				$.each(data, function () {

					items.push({
						title: this.ConciergerieService.title,
						content: this.ConciergerieService.truncated_content,
						image: this.ConciergerieService.image,
						url: '/' + curLang + '/conciergerie_services'
					});

				});

				self.items = items;
				self.update();

				conciergerie__carousel = $('.conciergerie__carousel');

				conciergerie__carousel.owlCarousel({
					loop: true,
					autoplay: opts.autoplay,
					autoplayHoverPause: true,
					responsive: opts.numSlides,
					margin: 10,
					center: opts.center

				});

				$('#conciergerie-carousel__btn-next').click(function () {
					conciergerie__carousel.trigger('next.owl.carousel');
					return false;
				});

				$('#conciergerie-carousel__btn-prev').click(function () {
					conciergerie__carousel.trigger('prev.owl.carousel');
					return false;
				});




			});

		}
	</script>

	<style>
		.item {
			display: block;
		}

		.carousel__image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
		}

		.item:hover .carousel__image img {
			transform: scale(1.1);
		}
	</style>
</conciergerieCarousel>