https://auberge-du-poids-public.fr/tags/activitiesCarouselSingle.tag

1<activitiesCarouselSingle>
2
3	<div id="activities_widget_carousel"
4		class="carousel__tag carousel__tag--single">
5
6		<div class="owl-carousel owl-theme activities__carousel">
7
8			<a href="{url}"
9				class="item "
10				each={
11				items
12				}>
13
14				<div class="carousel_single__image">
15					<img srcset="
16							{img_cache_dir}w600/{image} 600w,
17							{img_cache_dir}w800/{image} 800w,
18							{img_cache_dir}w1000/{image} 1000w,
19							{img_cache_dir}w1200/{image} 1200w,
20							{img_cache_dir}w1600/{image} 1600w,
21							{img_cache_dir}w2000/{image} 2000w						
22							"
23						src="{img_cache_dir}w600/{image}"
24						loading="lazy"
25						alt="{ title }" />
26				</div>
27
28				<div class="carousel_single__text_container">
29					<div class="carousel_single__text">
30						<p class="carousel_single__title">{ title }</p>
31						<p>{ content }</p>
32						<p>
33							<span class="button primary">{ link_text }</span>
34						</p>
35					</div>
36				</div>
37
38			</a>
39
40		</div>
41
42		<div class="carousel_navigation"
43			if={show_navigation}>
44			<a class="navBtn customNextBtn"
45				id="activities-carousel__btn-prev">
46
47				<svg>
48					<polyline points="7,12 17,25 27,12"
49						stroke-width="{ arrow_stroke_width }"
50						fill="none" />
51				</svg>
52
53			</a>
54
55			<a class="navBtn customPrevBtn"
56				id="activities-carousel__btn-next">
57
58				<svg>
59					<polyline points="7,12 17,25 27,12"
60						stroke-width="{ arrow_stroke_width }"
61						fill="none" />
62				</svg>
63
64			</a>
65		</div>
66
67
68	</div>
69
70	<script>
71		var self = this;
72		self.show_navigation = false;
73
74		this.arrow_stroke_width = 2;
75		if (typeof opts.arrow_stroke_width !== 'undefined') {
76			this.arrow_stroke_width = opts.arrow_stroke_width;
77		}
78
79
80
81		this.link_text = '+';
82
83		if (typeof opts.link_text !== 'undefined') {
84			this.link_text = opts.link_text;
85		}
86
87		this.on('mount', function () {
88
89			this.lazyLoad(self, loadItems);
90
91		});
92
93
94		const loadItems = () => {
95
96			$.getJSON('/' + curLang + '/activities/getActivities', function (data) {
97
98				var items = [];
99				$.each(data, function () {
100
101					items.push({
102						title: this.Activity.title,
103						content: this.Activity.truncated_content,
104						image: this.Activity.image,
105						url: this.Activity.view_url
106					});
107
108				});
109
110				self.items = items;
111
112				self.show_navigation = (self.items.length > 1) ? true : false;
113
114				self.update();
115
116				$(self.root.localName + ' .carousel__tag').css('min-height', '0');
117
118
119				activities__carousel = $('.activities__carousel');
120
121				activities__carousel.owlCarousel({
122					lazyLoad: true,
123					loop: true,
124					autoplay: true,
125					autoplayHoverPause: true,
126					responsive: {
127						0: {
128							items: 1,
129
130						}
131					},
132					margin: 10
133				});
134
135				$('#activities-carousel__btn-prev').click(function () {
136					activities__carousel.trigger('next.owl.carousel');
137					return false;
138				});
139
140				$('#activities-carousel__btn-next').click(function () {
141					activities__carousel.trigger('prev.owl.carousel');
142					return false;
143				});
144
145
146			});
147		}
148	</script>
149
150	<style scoped>
151		.carousel__tag {
152			min-height: 640px;
153		}
154
155		.navBtn svg {
156			stroke: #efefef;
157		}
158
159		.carousel_single__image {
160			background-size: cover;
161			background-position: center;
162			background-repeat: no-repeat;
163			position: relative;
164			overflow: hidden;
165
166
167		}
168
169		.carousel_single__image img {
170			height: 100%;
171			object-fit: cover;
172			object-position: center;
173		}
174
175		.button {
176			font-size: 2rem;
177			padding: 5px 20px;
178		}
179	</style>
180
181
182</activitiesCarouselSingle>