An error occurred while processing the template.
The following has evaluated to null or missing:
==> view_url [in template "37610#37640#128010" at line 211, column 24]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${view_url} [in template "37610#37640#128010" at line 211, column 22]
----
1<style>
2 .slideshow-container-ttdl-slider {
3 display: flex;
4 width: 100%;
5 height: 410px;
6 }
7 .text-content-ttdl-slider {
8 width: 40% ;
9 order: 1;
10 padding: 20px 20px 0 0;
11 background: white;
12 display: flex;
13 flex-direction: column;
14 justify-content: space-between;
15 box-sizing: border-box;
16 }
17 .text-content-ttdl-slider h2 {
18 font-size: clamp(24px, 3vw, 16px);
19 color: #035FB5;
20 }
21
22 .text-content-ttdl-slider p {
23 font-size: clamp(16px, 2vw, 12px);
24 color: #2E2E2E; ;
25 }
26 .slider-container-ttdl-slider {
27 display: flex;
28 width: 60%;
29 order: 2;
30 height: 410px;
31 align-items: center;
32 justify-content: left;
33 position: relative;
34 overflow: hidden;
35 }
36 .slides-ttdl-slider {
37 display: flex;
38 align-items: center;
39 position: absolute;
40 transition: transform 0.5s ease, opacity 0.5s ease;
41 opacity: 0;
42 }
43 .slide-ttdl-slider.active {
44 width: 545px;
45 height: 410px;
46 z-index: 3;
47 opacity: 1;
48 transform: translateX(0);
49 }
50 .slide-ttdl-slider.next {
51 width: 453px;
52 height: 340px;
53 z-index: 2;
54 opacity: 1;
55 transform: translateX(300px);
56 }
57
58 .slide-ttdl-slider.next-next {
59 width: 355px;
60 height: 265px;
61 z-index: 1;
62 opacity: 1;
63 transform: translateX(550px);
64 }
65
66 .text-content-ttdl-slider .highlight-ttdl-slider {
67 font-weight: bold;
68 }
69 .navigation-ttdl-slider {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 margin-top: 10px;
74 }
75 .progress-container-ttdl-slider {
76 display: flex;
77 justify-content: center;
78 align-items: center;
79 gap: 10px;
80 }
81 .progress-dot-ttdl-slider {
82 width: 30px;
83 height: 10px;
84 background-color: #EBEBEB;
85 border-radius: 10px;
86 border: 1px solid #ACB0B3;
87 cursor: pointer;
88 }
89 .progress-dot-ttdl-slider.active {
90 width: 12px;
91 height: 12px;
92 background-color: #DE6F18;
93 }
94
95 .prev-ttdl-slider, .next-ttdl-slider {
96 cursor: pointer;
97 padding: 10px;
98 font-size: 18px;
99 background-color: #E3E5E6;
100 border: none;
101 }
102
103 .prev-ttdl-slider, .next-ttdl-slider {
104 background-color: #E3E5E6;
105 border: 3px solid #ACB0B3;
106 color: #ACB0B3;
107 }
108 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
109 background-color: #F4CFB2;
110 border: 3px solid #DE6F18;
111 color: #DE6F18;
112 }
113 .text-wrapper-ttdl-slider {
114 padding-right: 5px;
115 }
116
117
118
119 @media (max-width: 768px) {
120 .slideshow-container-ttdl-slider {
121 flex-direction: column;
122 align-items: center;
123 height: auto;
124 }
125
126 .slider-container-ttdl-slider {
127 width: 100%;
128 height: auto;
129 position: unset;
130 order: -1; /* Đưa hình ảnh lên trên */
131 display: flex;
132 justify-content: center;
133 align-items: center;
134 }
135
136 .slide-ttdl-slider {
137 width: 90%;
138 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
139 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
140 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
141 display: block;
142 margin: 0 auto; /* Canh giữa hình ảnh */
143 position: static;
144 }
145
146 .text-content-ttdl-slider {
147 width: 100%;
148 padding: 15px;
149 text-align: center;
150 }
151}
152 @media (max-width: 480px) {
153 .slider-container-ttdl-slider {
154 height: auto;
155
156 }
157
158 .slide-ttdl-slider {
159 width: 90%;
160 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
161 max-height: 300px;
162 object-fit: cover;
163 display: block;
164 margin: 0 auto;
165 position: unset;
166 }
167
168 .text-content-ttdl-slider {
169 padding: 10px;
170 }
171}
172</style>
173
174<div class="slideshow-container-ttdl-slider">
175 <#if entries?has_content>
176 <!-- Phần hiển thị các slide -->
177 <div class="slider-container-ttdl-slider">
178 <#list entries as cur_entry>
179 <#assign renderer = cur_entry.getAssetRenderer() />
180 <#assign class_name = renderer.getClassName() />
181 <#if class_name == "com.liferay.journal.model.JournalArticle" && cur_entry.getAvailableLanguageIds()?seq_contains(locale)>
182 <#assign
183 title = cur_entry.getTitle(locale)
184 article = renderer.getArticle()
185 description = article.getDescription(locale)
186 ddm_template_key = article.getDDMTemplateKey()
187 view_url = "${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
188 />
189 <#if cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)??>
190 <#assign smallImageUrlSide = cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)>
191 <#else>
192 <#assign smallImageUrlSide = "/documents/37638/39612/kinhte-xahoi-bg.jpg">
193 </#if>
194
195 <#-- <a href="${view_url}" class="w-100 h-100"> -->
196 <img src="${smallImageUrlSide}"
197 class="slide-ttdl-slider <#if cur_entry?index == 0>active</#if>"
198 data-index="${cur_entry?index}"
199 data-title="${title}"
200 data-description="${description}"
201 data-url="${view_url}"
202 >
203 <#-- </a> -->
204
205 </#if>
206 </#list>
207 </div>
208
209 <!-- Block content -->
210 <div class="text-content-ttdl-slider">
211 <a href="${view_url}">
212 <div class="text-wrapper-ttdl-slider">
213 <h2 id="title-ttdl-slider">${title}</h2>
214 <p id="description-ttdl-slider">${description}</p>
215 </div>
216 </a>
217 <div class="navigation-ttdl-slider">
218 <div style="display: flex; align-items: center;">
219 <button class="prev-ttdl-slider" style="width: 30px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(-1)">❮</button>
220 <button class="next-ttdl-slider" style="width: 30px; margin-left: 10px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(1)">❯</button>
221 </div>
222 <div class="progress-container-ttdl-slider">
223 <#if entries?size gt 0>
224 <#list entries as entry>
225 <span class="progress-dot-ttdl-slider" onclick="currentSlideTtdl(${entry?index})"></span>
226 </#list>
227 </#if>
228 </div>
229 </div>
230 </div>
231 </#if>
232</div>
233
234<script>
235 let slideIndexTtdl = 1; // Bắt đầu từ slide đầu tiên
236
237 function changeSlideTtdl(n) {
238 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
239 if (slidesTtdl.length === 0) return;
240
241 // Cập nhật slideIndexTtdl và đảm bảo nó quay vòng ngay lập tức
242 slideIndexTtdl = (slideIndexTtdl + n) % slidesTtdl.length;
243 if (slideIndexTtdl < 0) slideIndexTtdl += slidesTtdl.length;
244
245 updateSlidesTtdlSlider();
246 }
247
248 function currentSlideTtdl(n) {
249 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
250 if (slidesTtdl.length === 0) return;
251 slideIndexTtdl = n % slidesTtdl.length;
252 updateSlidesTtdlSlider();
253 }
254
255
256
257 function updateSlidesTtdlSlider() {
258 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
259 let dotsTtdl = document.querySelectorAll(".progress-dot-ttdl-slider");
260 let titleElement = document.getElementById("title-ttdl-slider");
261 let descriptionElement = document.getElementById("description-ttdl-slider");
262
263 if (slidesTtdl.length === 0) return;
264
265 slidesTtdl.forEach((slide) => {
266 slide.classList.remove("active", "next", "next-next");
267 });
268
269 let current = slideIndexTtdl;
270 let next = (slideIndexTtdl + 1) % slidesTtdl.length;
271 let nextNext = (slideIndexTtdl + 2) % slidesTtdl.length;
272
273 slidesTtdl[current].classList.add("active");
274
275 if (slidesTtdl.length > 1) slidesTtdl[next].classList.add("next");
276 if (slidesTtdl.length > 2) slidesTtdl[nextNext].classList.add("next-next");
277
278 if (titleElement && descriptionElement) {
279 let activeSlide = slidesTtdl[slideIndexTtdl];
280 titleElement.textContent = activeSlide.getAttribute("data-title");
281 descriptionElement.innerHTML = activeSlide.getAttribute("data-description") || "";
282 }
283
284 dotsTtdl.forEach((dot, index) => {
285 dot.classList.toggle("active", index === slideIndexTtdl);
286 });
287 }
288
289
290 // Khởi tạo slider khi trang được tải
291 document.addEventListener("DOMContentLoaded", function () {
292 if (document.querySelectorAll(".slide-ttdl-slider").length > 0) {
293 updateSlidesTtdlSlider();
294 }
295 });
296
297
298 document.addEventListener("DOMContentLoaded", function () {
299 let titleElement = document.getElementById("title-ttdl-slider");
300 let descriptionElement = document.getElementById("description-ttdl-slider");
301 let sliderContainer = document.querySelector(".slider-container-ttdl-slider"); // Thêm sự kiện cho ảnh
302
303 function navigateToActiveArticle() {
304 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
305 let activeSlide = slidesTtdl[slideIndexTtdl];
306 let url = activeSlide.getAttribute("data-url");
307 if (url) {
308 window.location.href = url;
309 }
310 }
311
312 titleElement.addEventListener("click", navigateToActiveArticle);
313 descriptionElement.addEventListener("click", navigateToActiveArticle);
314 sliderContainer.addEventListener("click", navigateToActiveArticle); // Bắt sự kiện click vào ảnh
315});
316
317</script>
318<style>
319
320 .slide-ttdl-slider: hover {
321 cursor: pointer;
322 }
323 .slideshow-container-ttdl-slider {
324 display: flex;
325 width: 100%;
326 height: 410px;
327 }
328 .text-content-ttdl-slider {
329 width: 40% ;
330 padding: 20px 20px 0 0;
331 background: white;
332 display: flex;
333 flex-direction: column;
334 justify-content: space-between;
335 box-sizing: border-box;
336 }
337 .text-content-ttdl-slider h2 {
338 font-size: clamp(24px, 3vw, 16px);
339 color: #035FB5;
340 }
341
342 .text-content-ttdl-slider p {
343 font-size: clamp(16px, 2vw, 12px);
344 color: #2E2E2E; ;
345 }
346 .slider-container-ttdl-slider {
347 display: flex;
348 width: 60%;
349 height: 410px;
350 align-items: center;
351 justify-content: left;
352 position: relative;
353 overflow: hidden;
354 }
355 .slides-ttdl-slider {
356 position: relative;
357 display: flex;
358 align-items: center;
359 }
360 .slide-ttdl-slider {
361 position: absolute;
362 transition: transform 0.5s ease, opacity 0.5s ease;
363 opacity: 0;
364 }
365 .slide-ttdl-slider.active {
366 width: 545px;
367 height: 410px;
368 z-index: 3;
369 opacity: 1;
370 transform: translateX(0);
371 }
372 .slide-ttdl-slider.next {
373 width: 453px;
374 height: 340px;
375 z-index: 2;
376 opacity: 1;
377 transform: translateX(300px);
378 }
379 .text-content-ttdl-slider .highlight-ttdl-slider {
380 font-weight: bold;
381 }
382 .slide-ttdl-slider.next-next {
383 width: 355px;
384 height: 265px;
385 z-index: 1;
386 opacity: 1;
387 transform: translateX(550px);
388 }
389 .navigation-ttdl-slider {
390 display: flex;
391 justify-content: space-between;
392 align-items: center;
393 margin-top: 10px;
394 }
395 .progress-container {
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 gap: 10px;
400 }
401 .progress-dot {
402 width: 30px;
403 height: 10px;
404 background-color: #EBEBEB;
405 border-radius: 10px;
406 border: 1px solid #ACB0B3;
407 cursor: pointer;
408 }
409 .progress-dot.active {
410 width: 12px;
411 height: 12px;
412 background-color: #DE6F18;
413 }
414
415 .prev-ttdl-slider, .next-ttdl-slider {
416 cursor: pointer;
417 padding: 10px;
418 font-size: 18px;
419 background-color: #E3E5E6;
420 /* color: white; */
421 border: none;
422 }
423
424 .prev-ttdl-slider, .next-ttdl-slider {
425 background-color: #E3E5E6;
426 border: 3px solid #ACB0B3;
427 color: #ACB0B3;
428 }
429 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
430 background-color: #F4CFB2;
431 border: 3px solid #DE6F18;
432 color: #DE6F18;
433 }
434 .text-wrapper-ttdl-slider {
435 padding-right: 5px;
436 }
437
438
439
440 /* css responsive */
441 @media (max-width: 768px) {
442 .slideshow-container-ttdl-slider {
443 flex-direction: column;
444 align-items: center;
445 height: auto;
446 }
447
448 .slider-container-ttdl-slider {
449 width: 100%;
450 height: auto;
451 position: unset;
452 order: -1; /* Đưa hình ảnh lên trên */
453 display: flex;
454 justify-content: center;
455 align-items: center;
456 }
457
458 .slide-ttdl-slider {
459 width: 90%;
460 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
461 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
462 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
463 display: block;
464 margin: 0 auto; /* Canh giữa hình ảnh */
465 position: static;
466 }
467
468 .text-content-ttdl-slider {
469 width: 100%;
470 padding: 15px;
471 text-align: center;
472 }
473}
474
475@media (max-width: 480px) {
476 .slider-container-ttdl-slider {
477 height: auto;
478
479 }
480
481 .slide-ttdl-slider {
482 width: 90%;
483 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
484 max-height: 300px;
485 object-fit: cover;
486 display: block;
487 margin: 0 auto;
488 position: unset;
489 }
490
491 .text-content-ttdl-slider {
492 padding: 10px;
493 }
494}
495
496
497</style>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> view_url [in template "37610#37640#128010" at line 211, column 24]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${view_url} [in template "37610#37640#128010" at line 211, column 22]
----
1<style>
2 .slideshow-container-ttdl-slider {
3 display: flex;
4 width: 100%;
5 height: 410px;
6 }
7 .text-content-ttdl-slider {
8 width: 40% ;
9 order: 1;
10 padding: 20px 20px 0 0;
11 background: white;
12 display: flex;
13 flex-direction: column;
14 justify-content: space-between;
15 box-sizing: border-box;
16 }
17 .text-content-ttdl-slider h2 {
18 font-size: clamp(24px, 3vw, 16px);
19 color: #035FB5;
20 }
21
22 .text-content-ttdl-slider p {
23 font-size: clamp(16px, 2vw, 12px);
24 color: #2E2E2E; ;
25 }
26 .slider-container-ttdl-slider {
27 display: flex;
28 width: 60%;
29 order: 2;
30 height: 410px;
31 align-items: center;
32 justify-content: left;
33 position: relative;
34 overflow: hidden;
35 }
36 .slides-ttdl-slider {
37 display: flex;
38 align-items: center;
39 position: absolute;
40 transition: transform 0.5s ease, opacity 0.5s ease;
41 opacity: 0;
42 }
43 .slide-ttdl-slider.active {
44 width: 545px;
45 height: 410px;
46 z-index: 3;
47 opacity: 1;
48 transform: translateX(0);
49 }
50 .slide-ttdl-slider.next {
51 width: 453px;
52 height: 340px;
53 z-index: 2;
54 opacity: 1;
55 transform: translateX(300px);
56 }
57
58 .slide-ttdl-slider.next-next {
59 width: 355px;
60 height: 265px;
61 z-index: 1;
62 opacity: 1;
63 transform: translateX(550px);
64 }
65
66 .text-content-ttdl-slider .highlight-ttdl-slider {
67 font-weight: bold;
68 }
69 .navigation-ttdl-slider {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 margin-top: 10px;
74 }
75 .progress-container-ttdl-slider {
76 display: flex;
77 justify-content: center;
78 align-items: center;
79 gap: 10px;
80 }
81 .progress-dot-ttdl-slider {
82 width: 30px;
83 height: 10px;
84 background-color: #EBEBEB;
85 border-radius: 10px;
86 border: 1px solid #ACB0B3;
87 cursor: pointer;
88 }
89 .progress-dot-ttdl-slider.active {
90 width: 12px;
91 height: 12px;
92 background-color: #DE6F18;
93 }
94
95 .prev-ttdl-slider, .next-ttdl-slider {
96 cursor: pointer;
97 padding: 10px;
98 font-size: 18px;
99 background-color: #E3E5E6;
100 border: none;
101 }
102
103 .prev-ttdl-slider, .next-ttdl-slider {
104 background-color: #E3E5E6;
105 border: 3px solid #ACB0B3;
106 color: #ACB0B3;
107 }
108 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
109 background-color: #F4CFB2;
110 border: 3px solid #DE6F18;
111 color: #DE6F18;
112 }
113 .text-wrapper-ttdl-slider {
114 padding-right: 5px;
115 }
116
117
118
119 @media (max-width: 768px) {
120 .slideshow-container-ttdl-slider {
121 flex-direction: column;
122 align-items: center;
123 height: auto;
124 }
125
126 .slider-container-ttdl-slider {
127 width: 100%;
128 height: auto;
129 position: unset;
130 order: -1; /* Đưa hình ảnh lên trên */
131 display: flex;
132 justify-content: center;
133 align-items: center;
134 }
135
136 .slide-ttdl-slider {
137 width: 90%;
138 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
139 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
140 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
141 display: block;
142 margin: 0 auto; /* Canh giữa hình ảnh */
143 position: static;
144 }
145
146 .text-content-ttdl-slider {
147 width: 100%;
148 padding: 15px;
149 text-align: center;
150 }
151}
152 @media (max-width: 480px) {
153 .slider-container-ttdl-slider {
154 height: auto;
155
156 }
157
158 .slide-ttdl-slider {
159 width: 90%;
160 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
161 max-height: 300px;
162 object-fit: cover;
163 display: block;
164 margin: 0 auto;
165 position: unset;
166 }
167
168 .text-content-ttdl-slider {
169 padding: 10px;
170 }
171}
172</style>
173
174<div class="slideshow-container-ttdl-slider">
175 <#if entries?has_content>
176 <!-- Phần hiển thị các slide -->
177 <div class="slider-container-ttdl-slider">
178 <#list entries as cur_entry>
179 <#assign renderer = cur_entry.getAssetRenderer() />
180 <#assign class_name = renderer.getClassName() />
181 <#if class_name == "com.liferay.journal.model.JournalArticle" && cur_entry.getAvailableLanguageIds()?seq_contains(locale)>
182 <#assign
183 title = cur_entry.getTitle(locale)
184 article = renderer.getArticle()
185 description = article.getDescription(locale)
186 ddm_template_key = article.getDDMTemplateKey()
187 view_url = "${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
188 />
189 <#if cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)??>
190 <#assign smallImageUrlSide = cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)>
191 <#else>
192 <#assign smallImageUrlSide = "/documents/37638/39612/kinhte-xahoi-bg.jpg">
193 </#if>
194
195 <#-- <a href="${view_url}" class="w-100 h-100"> -->
196 <img src="${smallImageUrlSide}"
197 class="slide-ttdl-slider <#if cur_entry?index == 0>active</#if>"
198 data-index="${cur_entry?index}"
199 data-title="${title}"
200 data-description="${description}"
201 data-url="${view_url}"
202 >
203 <#-- </a> -->
204
205 </#if>
206 </#list>
207 </div>
208
209 <!-- Block content -->
210 <div class="text-content-ttdl-slider">
211 <a href="${view_url}">
212 <div class="text-wrapper-ttdl-slider">
213 <h2 id="title-ttdl-slider">${title}</h2>
214 <p id="description-ttdl-slider">${description}</p>
215 </div>
216 </a>
217 <div class="navigation-ttdl-slider">
218 <div style="display: flex; align-items: center;">
219 <button class="prev-ttdl-slider" style="width: 30px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(-1)">❮</button>
220 <button class="next-ttdl-slider" style="width: 30px; margin-left: 10px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(1)">❯</button>
221 </div>
222 <div class="progress-container-ttdl-slider">
223 <#if entries?size gt 0>
224 <#list entries as entry>
225 <span class="progress-dot-ttdl-slider" onclick="currentSlideTtdl(${entry?index})"></span>
226 </#list>
227 </#if>
228 </div>
229 </div>
230 </div>
231 </#if>
232</div>
233
234<script>
235 let slideIndexTtdl = 1; // Bắt đầu từ slide đầu tiên
236
237 function changeSlideTtdl(n) {
238 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
239 if (slidesTtdl.length === 0) return;
240
241 // Cập nhật slideIndexTtdl và đảm bảo nó quay vòng ngay lập tức
242 slideIndexTtdl = (slideIndexTtdl + n) % slidesTtdl.length;
243 if (slideIndexTtdl < 0) slideIndexTtdl += slidesTtdl.length;
244
245 updateSlidesTtdlSlider();
246 }
247
248 function currentSlideTtdl(n) {
249 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
250 if (slidesTtdl.length === 0) return;
251 slideIndexTtdl = n % slidesTtdl.length;
252 updateSlidesTtdlSlider();
253 }
254
255
256
257 function updateSlidesTtdlSlider() {
258 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
259 let dotsTtdl = document.querySelectorAll(".progress-dot-ttdl-slider");
260 let titleElement = document.getElementById("title-ttdl-slider");
261 let descriptionElement = document.getElementById("description-ttdl-slider");
262
263 if (slidesTtdl.length === 0) return;
264
265 slidesTtdl.forEach((slide) => {
266 slide.classList.remove("active", "next", "next-next");
267 });
268
269 let current = slideIndexTtdl;
270 let next = (slideIndexTtdl + 1) % slidesTtdl.length;
271 let nextNext = (slideIndexTtdl + 2) % slidesTtdl.length;
272
273 slidesTtdl[current].classList.add("active");
274
275 if (slidesTtdl.length > 1) slidesTtdl[next].classList.add("next");
276 if (slidesTtdl.length > 2) slidesTtdl[nextNext].classList.add("next-next");
277
278 if (titleElement && descriptionElement) {
279 let activeSlide = slidesTtdl[slideIndexTtdl];
280 titleElement.textContent = activeSlide.getAttribute("data-title");
281 descriptionElement.innerHTML = activeSlide.getAttribute("data-description") || "";
282 }
283
284 dotsTtdl.forEach((dot, index) => {
285 dot.classList.toggle("active", index === slideIndexTtdl);
286 });
287 }
288
289
290 // Khởi tạo slider khi trang được tải
291 document.addEventListener("DOMContentLoaded", function () {
292 if (document.querySelectorAll(".slide-ttdl-slider").length > 0) {
293 updateSlidesTtdlSlider();
294 }
295 });
296
297
298 document.addEventListener("DOMContentLoaded", function () {
299 let titleElement = document.getElementById("title-ttdl-slider");
300 let descriptionElement = document.getElementById("description-ttdl-slider");
301 let sliderContainer = document.querySelector(".slider-container-ttdl-slider"); // Thêm sự kiện cho ảnh
302
303 function navigateToActiveArticle() {
304 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
305 let activeSlide = slidesTtdl[slideIndexTtdl];
306 let url = activeSlide.getAttribute("data-url");
307 if (url) {
308 window.location.href = url;
309 }
310 }
311
312 titleElement.addEventListener("click", navigateToActiveArticle);
313 descriptionElement.addEventListener("click", navigateToActiveArticle);
314 sliderContainer.addEventListener("click", navigateToActiveArticle); // Bắt sự kiện click vào ảnh
315});
316
317</script>
318<style>
319
320 .slide-ttdl-slider: hover {
321 cursor: pointer;
322 }
323 .slideshow-container-ttdl-slider {
324 display: flex;
325 width: 100%;
326 height: 410px;
327 }
328 .text-content-ttdl-slider {
329 width: 40% ;
330 padding: 20px 20px 0 0;
331 background: white;
332 display: flex;
333 flex-direction: column;
334 justify-content: space-between;
335 box-sizing: border-box;
336 }
337 .text-content-ttdl-slider h2 {
338 font-size: clamp(24px, 3vw, 16px);
339 color: #035FB5;
340 }
341
342 .text-content-ttdl-slider p {
343 font-size: clamp(16px, 2vw, 12px);
344 color: #2E2E2E; ;
345 }
346 .slider-container-ttdl-slider {
347 display: flex;
348 width: 60%;
349 height: 410px;
350 align-items: center;
351 justify-content: left;
352 position: relative;
353 overflow: hidden;
354 }
355 .slides-ttdl-slider {
356 position: relative;
357 display: flex;
358 align-items: center;
359 }
360 .slide-ttdl-slider {
361 position: absolute;
362 transition: transform 0.5s ease, opacity 0.5s ease;
363 opacity: 0;
364 }
365 .slide-ttdl-slider.active {
366 width: 545px;
367 height: 410px;
368 z-index: 3;
369 opacity: 1;
370 transform: translateX(0);
371 }
372 .slide-ttdl-slider.next {
373 width: 453px;
374 height: 340px;
375 z-index: 2;
376 opacity: 1;
377 transform: translateX(300px);
378 }
379 .text-content-ttdl-slider .highlight-ttdl-slider {
380 font-weight: bold;
381 }
382 .slide-ttdl-slider.next-next {
383 width: 355px;
384 height: 265px;
385 z-index: 1;
386 opacity: 1;
387 transform: translateX(550px);
388 }
389 .navigation-ttdl-slider {
390 display: flex;
391 justify-content: space-between;
392 align-items: center;
393 margin-top: 10px;
394 }
395 .progress-container {
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 gap: 10px;
400 }
401 .progress-dot {
402 width: 30px;
403 height: 10px;
404 background-color: #EBEBEB;
405 border-radius: 10px;
406 border: 1px solid #ACB0B3;
407 cursor: pointer;
408 }
409 .progress-dot.active {
410 width: 12px;
411 height: 12px;
412 background-color: #DE6F18;
413 }
414
415 .prev-ttdl-slider, .next-ttdl-slider {
416 cursor: pointer;
417 padding: 10px;
418 font-size: 18px;
419 background-color: #E3E5E6;
420 /* color: white; */
421 border: none;
422 }
423
424 .prev-ttdl-slider, .next-ttdl-slider {
425 background-color: #E3E5E6;
426 border: 3px solid #ACB0B3;
427 color: #ACB0B3;
428 }
429 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
430 background-color: #F4CFB2;
431 border: 3px solid #DE6F18;
432 color: #DE6F18;
433 }
434 .text-wrapper-ttdl-slider {
435 padding-right: 5px;
436 }
437
438
439
440 /* css responsive */
441 @media (max-width: 768px) {
442 .slideshow-container-ttdl-slider {
443 flex-direction: column;
444 align-items: center;
445 height: auto;
446 }
447
448 .slider-container-ttdl-slider {
449 width: 100%;
450 height: auto;
451 position: unset;
452 order: -1; /* Đưa hình ảnh lên trên */
453 display: flex;
454 justify-content: center;
455 align-items: center;
456 }
457
458 .slide-ttdl-slider {
459 width: 90%;
460 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
461 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
462 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
463 display: block;
464 margin: 0 auto; /* Canh giữa hình ảnh */
465 position: static;
466 }
467
468 .text-content-ttdl-slider {
469 width: 100%;
470 padding: 15px;
471 text-align: center;
472 }
473}
474
475@media (max-width: 480px) {
476 .slider-container-ttdl-slider {
477 height: auto;
478
479 }
480
481 .slide-ttdl-slider {
482 width: 90%;
483 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
484 max-height: 300px;
485 object-fit: cover;
486 display: block;
487 margin: 0 auto;
488 position: unset;
489 }
490
491 .text-content-ttdl-slider {
492 padding: 10px;
493 }
494}
495
496
497</style>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> view_url [in template "37610#37640#128010" at line 211, column 24]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${view_url} [in template "37610#37640#128010" at line 211, column 22]
----
1<style>
2 .slideshow-container-ttdl-slider {
3 display: flex;
4 width: 100%;
5 height: 410px;
6 }
7 .text-content-ttdl-slider {
8 width: 40% ;
9 order: 1;
10 padding: 20px 20px 0 0;
11 background: white;
12 display: flex;
13 flex-direction: column;
14 justify-content: space-between;
15 box-sizing: border-box;
16 }
17 .text-content-ttdl-slider h2 {
18 font-size: clamp(24px, 3vw, 16px);
19 color: #035FB5;
20 }
21
22 .text-content-ttdl-slider p {
23 font-size: clamp(16px, 2vw, 12px);
24 color: #2E2E2E; ;
25 }
26 .slider-container-ttdl-slider {
27 display: flex;
28 width: 60%;
29 order: 2;
30 height: 410px;
31 align-items: center;
32 justify-content: left;
33 position: relative;
34 overflow: hidden;
35 }
36 .slides-ttdl-slider {
37 display: flex;
38 align-items: center;
39 position: absolute;
40 transition: transform 0.5s ease, opacity 0.5s ease;
41 opacity: 0;
42 }
43 .slide-ttdl-slider.active {
44 width: 545px;
45 height: 410px;
46 z-index: 3;
47 opacity: 1;
48 transform: translateX(0);
49 }
50 .slide-ttdl-slider.next {
51 width: 453px;
52 height: 340px;
53 z-index: 2;
54 opacity: 1;
55 transform: translateX(300px);
56 }
57
58 .slide-ttdl-slider.next-next {
59 width: 355px;
60 height: 265px;
61 z-index: 1;
62 opacity: 1;
63 transform: translateX(550px);
64 }
65
66 .text-content-ttdl-slider .highlight-ttdl-slider {
67 font-weight: bold;
68 }
69 .navigation-ttdl-slider {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 margin-top: 10px;
74 }
75 .progress-container-ttdl-slider {
76 display: flex;
77 justify-content: center;
78 align-items: center;
79 gap: 10px;
80 }
81 .progress-dot-ttdl-slider {
82 width: 30px;
83 height: 10px;
84 background-color: #EBEBEB;
85 border-radius: 10px;
86 border: 1px solid #ACB0B3;
87 cursor: pointer;
88 }
89 .progress-dot-ttdl-slider.active {
90 width: 12px;
91 height: 12px;
92 background-color: #DE6F18;
93 }
94
95 .prev-ttdl-slider, .next-ttdl-slider {
96 cursor: pointer;
97 padding: 10px;
98 font-size: 18px;
99 background-color: #E3E5E6;
100 border: none;
101 }
102
103 .prev-ttdl-slider, .next-ttdl-slider {
104 background-color: #E3E5E6;
105 border: 3px solid #ACB0B3;
106 color: #ACB0B3;
107 }
108 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
109 background-color: #F4CFB2;
110 border: 3px solid #DE6F18;
111 color: #DE6F18;
112 }
113 .text-wrapper-ttdl-slider {
114 padding-right: 5px;
115 }
116
117
118
119 @media (max-width: 768px) {
120 .slideshow-container-ttdl-slider {
121 flex-direction: column;
122 align-items: center;
123 height: auto;
124 }
125
126 .slider-container-ttdl-slider {
127 width: 100%;
128 height: auto;
129 position: unset;
130 order: -1; /* Đưa hình ảnh lên trên */
131 display: flex;
132 justify-content: center;
133 align-items: center;
134 }
135
136 .slide-ttdl-slider {
137 width: 90%;
138 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
139 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
140 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
141 display: block;
142 margin: 0 auto; /* Canh giữa hình ảnh */
143 position: static;
144 }
145
146 .text-content-ttdl-slider {
147 width: 100%;
148 padding: 15px;
149 text-align: center;
150 }
151}
152 @media (max-width: 480px) {
153 .slider-container-ttdl-slider {
154 height: auto;
155
156 }
157
158 .slide-ttdl-slider {
159 width: 90%;
160 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
161 max-height: 300px;
162 object-fit: cover;
163 display: block;
164 margin: 0 auto;
165 position: unset;
166 }
167
168 .text-content-ttdl-slider {
169 padding: 10px;
170 }
171}
172</style>
173
174<div class="slideshow-container-ttdl-slider">
175 <#if entries?has_content>
176 <!-- Phần hiển thị các slide -->
177 <div class="slider-container-ttdl-slider">
178 <#list entries as cur_entry>
179 <#assign renderer = cur_entry.getAssetRenderer() />
180 <#assign class_name = renderer.getClassName() />
181 <#if class_name == "com.liferay.journal.model.JournalArticle" && cur_entry.getAvailableLanguageIds()?seq_contains(locale)>
182 <#assign
183 title = cur_entry.getTitle(locale)
184 article = renderer.getArticle()
185 description = article.getDescription(locale)
186 ddm_template_key = article.getDDMTemplateKey()
187 view_url = "${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
188 />
189 <#if cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)??>
190 <#assign smallImageUrlSide = cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)>
191 <#else>
192 <#assign smallImageUrlSide = "/documents/37638/39612/kinhte-xahoi-bg.jpg">
193 </#if>
194
195 <#-- <a href="${view_url}" class="w-100 h-100"> -->
196 <img src="${smallImageUrlSide}"
197 class="slide-ttdl-slider <#if cur_entry?index == 0>active</#if>"
198 data-index="${cur_entry?index}"
199 data-title="${title}"
200 data-description="${description}"
201 data-url="${view_url}"
202 >
203 <#-- </a> -->
204
205 </#if>
206 </#list>
207 </div>
208
209 <!-- Block content -->
210 <div class="text-content-ttdl-slider">
211 <a href="${view_url}">
212 <div class="text-wrapper-ttdl-slider">
213 <h2 id="title-ttdl-slider">${title}</h2>
214 <p id="description-ttdl-slider">${description}</p>
215 </div>
216 </a>
217 <div class="navigation-ttdl-slider">
218 <div style="display: flex; align-items: center;">
219 <button class="prev-ttdl-slider" style="width: 30px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(-1)">❮</button>
220 <button class="next-ttdl-slider" style="width: 30px; margin-left: 10px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(1)">❯</button>
221 </div>
222 <div class="progress-container-ttdl-slider">
223 <#if entries?size gt 0>
224 <#list entries as entry>
225 <span class="progress-dot-ttdl-slider" onclick="currentSlideTtdl(${entry?index})"></span>
226 </#list>
227 </#if>
228 </div>
229 </div>
230 </div>
231 </#if>
232</div>
233
234<script>
235 let slideIndexTtdl = 1; // Bắt đầu từ slide đầu tiên
236
237 function changeSlideTtdl(n) {
238 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
239 if (slidesTtdl.length === 0) return;
240
241 // Cập nhật slideIndexTtdl và đảm bảo nó quay vòng ngay lập tức
242 slideIndexTtdl = (slideIndexTtdl + n) % slidesTtdl.length;
243 if (slideIndexTtdl < 0) slideIndexTtdl += slidesTtdl.length;
244
245 updateSlidesTtdlSlider();
246 }
247
248 function currentSlideTtdl(n) {
249 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
250 if (slidesTtdl.length === 0) return;
251 slideIndexTtdl = n % slidesTtdl.length;
252 updateSlidesTtdlSlider();
253 }
254
255
256
257 function updateSlidesTtdlSlider() {
258 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
259 let dotsTtdl = document.querySelectorAll(".progress-dot-ttdl-slider");
260 let titleElement = document.getElementById("title-ttdl-slider");
261 let descriptionElement = document.getElementById("description-ttdl-slider");
262
263 if (slidesTtdl.length === 0) return;
264
265 slidesTtdl.forEach((slide) => {
266 slide.classList.remove("active", "next", "next-next");
267 });
268
269 let current = slideIndexTtdl;
270 let next = (slideIndexTtdl + 1) % slidesTtdl.length;
271 let nextNext = (slideIndexTtdl + 2) % slidesTtdl.length;
272
273 slidesTtdl[current].classList.add("active");
274
275 if (slidesTtdl.length > 1) slidesTtdl[next].classList.add("next");
276 if (slidesTtdl.length > 2) slidesTtdl[nextNext].classList.add("next-next");
277
278 if (titleElement && descriptionElement) {
279 let activeSlide = slidesTtdl[slideIndexTtdl];
280 titleElement.textContent = activeSlide.getAttribute("data-title");
281 descriptionElement.innerHTML = activeSlide.getAttribute("data-description") || "";
282 }
283
284 dotsTtdl.forEach((dot, index) => {
285 dot.classList.toggle("active", index === slideIndexTtdl);
286 });
287 }
288
289
290 // Khởi tạo slider khi trang được tải
291 document.addEventListener("DOMContentLoaded", function () {
292 if (document.querySelectorAll(".slide-ttdl-slider").length > 0) {
293 updateSlidesTtdlSlider();
294 }
295 });
296
297
298 document.addEventListener("DOMContentLoaded", function () {
299 let titleElement = document.getElementById("title-ttdl-slider");
300 let descriptionElement = document.getElementById("description-ttdl-slider");
301 let sliderContainer = document.querySelector(".slider-container-ttdl-slider"); // Thêm sự kiện cho ảnh
302
303 function navigateToActiveArticle() {
304 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
305 let activeSlide = slidesTtdl[slideIndexTtdl];
306 let url = activeSlide.getAttribute("data-url");
307 if (url) {
308 window.location.href = url;
309 }
310 }
311
312 titleElement.addEventListener("click", navigateToActiveArticle);
313 descriptionElement.addEventListener("click", navigateToActiveArticle);
314 sliderContainer.addEventListener("click", navigateToActiveArticle); // Bắt sự kiện click vào ảnh
315});
316
317</script>
318<style>
319
320 .slide-ttdl-slider: hover {
321 cursor: pointer;
322 }
323 .slideshow-container-ttdl-slider {
324 display: flex;
325 width: 100%;
326 height: 410px;
327 }
328 .text-content-ttdl-slider {
329 width: 40% ;
330 padding: 20px 20px 0 0;
331 background: white;
332 display: flex;
333 flex-direction: column;
334 justify-content: space-between;
335 box-sizing: border-box;
336 }
337 .text-content-ttdl-slider h2 {
338 font-size: clamp(24px, 3vw, 16px);
339 color: #035FB5;
340 }
341
342 .text-content-ttdl-slider p {
343 font-size: clamp(16px, 2vw, 12px);
344 color: #2E2E2E; ;
345 }
346 .slider-container-ttdl-slider {
347 display: flex;
348 width: 60%;
349 height: 410px;
350 align-items: center;
351 justify-content: left;
352 position: relative;
353 overflow: hidden;
354 }
355 .slides-ttdl-slider {
356 position: relative;
357 display: flex;
358 align-items: center;
359 }
360 .slide-ttdl-slider {
361 position: absolute;
362 transition: transform 0.5s ease, opacity 0.5s ease;
363 opacity: 0;
364 }
365 .slide-ttdl-slider.active {
366 width: 545px;
367 height: 410px;
368 z-index: 3;
369 opacity: 1;
370 transform: translateX(0);
371 }
372 .slide-ttdl-slider.next {
373 width: 453px;
374 height: 340px;
375 z-index: 2;
376 opacity: 1;
377 transform: translateX(300px);
378 }
379 .text-content-ttdl-slider .highlight-ttdl-slider {
380 font-weight: bold;
381 }
382 .slide-ttdl-slider.next-next {
383 width: 355px;
384 height: 265px;
385 z-index: 1;
386 opacity: 1;
387 transform: translateX(550px);
388 }
389 .navigation-ttdl-slider {
390 display: flex;
391 justify-content: space-between;
392 align-items: center;
393 margin-top: 10px;
394 }
395 .progress-container {
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 gap: 10px;
400 }
401 .progress-dot {
402 width: 30px;
403 height: 10px;
404 background-color: #EBEBEB;
405 border-radius: 10px;
406 border: 1px solid #ACB0B3;
407 cursor: pointer;
408 }
409 .progress-dot.active {
410 width: 12px;
411 height: 12px;
412 background-color: #DE6F18;
413 }
414
415 .prev-ttdl-slider, .next-ttdl-slider {
416 cursor: pointer;
417 padding: 10px;
418 font-size: 18px;
419 background-color: #E3E5E6;
420 /* color: white; */
421 border: none;
422 }
423
424 .prev-ttdl-slider, .next-ttdl-slider {
425 background-color: #E3E5E6;
426 border: 3px solid #ACB0B3;
427 color: #ACB0B3;
428 }
429 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
430 background-color: #F4CFB2;
431 border: 3px solid #DE6F18;
432 color: #DE6F18;
433 }
434 .text-wrapper-ttdl-slider {
435 padding-right: 5px;
436 }
437
438
439
440 /* css responsive */
441 @media (max-width: 768px) {
442 .slideshow-container-ttdl-slider {
443 flex-direction: column;
444 align-items: center;
445 height: auto;
446 }
447
448 .slider-container-ttdl-slider {
449 width: 100%;
450 height: auto;
451 position: unset;
452 order: -1; /* Đưa hình ảnh lên trên */
453 display: flex;
454 justify-content: center;
455 align-items: center;
456 }
457
458 .slide-ttdl-slider {
459 width: 90%;
460 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
461 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
462 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
463 display: block;
464 margin: 0 auto; /* Canh giữa hình ảnh */
465 position: static;
466 }
467
468 .text-content-ttdl-slider {
469 width: 100%;
470 padding: 15px;
471 text-align: center;
472 }
473}
474
475@media (max-width: 480px) {
476 .slider-container-ttdl-slider {
477 height: auto;
478
479 }
480
481 .slide-ttdl-slider {
482 width: 90%;
483 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
484 max-height: 300px;
485 object-fit: cover;
486 display: block;
487 margin: 0 auto;
488 position: unset;
489 }
490
491 .text-content-ttdl-slider {
492 padding: 10px;
493 }
494}
495
496
497</style>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> view_url [in template "37610#37640#128010" at line 211, column 24]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${view_url} [in template "37610#37640#128010" at line 211, column 22]
----
1<style>
2 .slideshow-container-ttdl-slider {
3 display: flex;
4 width: 100%;
5 height: 410px;
6 }
7 .text-content-ttdl-slider {
8 width: 40% ;
9 order: 1;
10 padding: 20px 20px 0 0;
11 background: white;
12 display: flex;
13 flex-direction: column;
14 justify-content: space-between;
15 box-sizing: border-box;
16 }
17 .text-content-ttdl-slider h2 {
18 font-size: clamp(24px, 3vw, 16px);
19 color: #035FB5;
20 }
21
22 .text-content-ttdl-slider p {
23 font-size: clamp(16px, 2vw, 12px);
24 color: #2E2E2E; ;
25 }
26 .slider-container-ttdl-slider {
27 display: flex;
28 width: 60%;
29 order: 2;
30 height: 410px;
31 align-items: center;
32 justify-content: left;
33 position: relative;
34 overflow: hidden;
35 }
36 .slides-ttdl-slider {
37 display: flex;
38 align-items: center;
39 position: absolute;
40 transition: transform 0.5s ease, opacity 0.5s ease;
41 opacity: 0;
42 }
43 .slide-ttdl-slider.active {
44 width: 545px;
45 height: 410px;
46 z-index: 3;
47 opacity: 1;
48 transform: translateX(0);
49 }
50 .slide-ttdl-slider.next {
51 width: 453px;
52 height: 340px;
53 z-index: 2;
54 opacity: 1;
55 transform: translateX(300px);
56 }
57
58 .slide-ttdl-slider.next-next {
59 width: 355px;
60 height: 265px;
61 z-index: 1;
62 opacity: 1;
63 transform: translateX(550px);
64 }
65
66 .text-content-ttdl-slider .highlight-ttdl-slider {
67 font-weight: bold;
68 }
69 .navigation-ttdl-slider {
70 display: flex;
71 justify-content: space-between;
72 align-items: center;
73 margin-top: 10px;
74 }
75 .progress-container-ttdl-slider {
76 display: flex;
77 justify-content: center;
78 align-items: center;
79 gap: 10px;
80 }
81 .progress-dot-ttdl-slider {
82 width: 30px;
83 height: 10px;
84 background-color: #EBEBEB;
85 border-radius: 10px;
86 border: 1px solid #ACB0B3;
87 cursor: pointer;
88 }
89 .progress-dot-ttdl-slider.active {
90 width: 12px;
91 height: 12px;
92 background-color: #DE6F18;
93 }
94
95 .prev-ttdl-slider, .next-ttdl-slider {
96 cursor: pointer;
97 padding: 10px;
98 font-size: 18px;
99 background-color: #E3E5E6;
100 border: none;
101 }
102
103 .prev-ttdl-slider, .next-ttdl-slider {
104 background-color: #E3E5E6;
105 border: 3px solid #ACB0B3;
106 color: #ACB0B3;
107 }
108 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
109 background-color: #F4CFB2;
110 border: 3px solid #DE6F18;
111 color: #DE6F18;
112 }
113 .text-wrapper-ttdl-slider {
114 padding-right: 5px;
115 }
116
117
118
119 @media (max-width: 768px) {
120 .slideshow-container-ttdl-slider {
121 flex-direction: column;
122 align-items: center;
123 height: auto;
124 }
125
126 .slider-container-ttdl-slider {
127 width: 100%;
128 height: auto;
129 position: unset;
130 order: -1; /* Đưa hình ảnh lên trên */
131 display: flex;
132 justify-content: center;
133 align-items: center;
134 }
135
136 .slide-ttdl-slider {
137 width: 90%;
138 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
139 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
140 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
141 display: block;
142 margin: 0 auto; /* Canh giữa hình ảnh */
143 position: static;
144 }
145
146 .text-content-ttdl-slider {
147 width: 100%;
148 padding: 15px;
149 text-align: center;
150 }
151}
152 @media (max-width: 480px) {
153 .slider-container-ttdl-slider {
154 height: auto;
155
156 }
157
158 .slide-ttdl-slider {
159 width: 90%;
160 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
161 max-height: 300px;
162 object-fit: cover;
163 display: block;
164 margin: 0 auto;
165 position: unset;
166 }
167
168 .text-content-ttdl-slider {
169 padding: 10px;
170 }
171}
172</style>
173
174<div class="slideshow-container-ttdl-slider">
175 <#if entries?has_content>
176 <!-- Phần hiển thị các slide -->
177 <div class="slider-container-ttdl-slider">
178 <#list entries as cur_entry>
179 <#assign renderer = cur_entry.getAssetRenderer() />
180 <#assign class_name = renderer.getClassName() />
181 <#if class_name == "com.liferay.journal.model.JournalArticle" && cur_entry.getAvailableLanguageIds()?seq_contains(locale)>
182 <#assign
183 title = cur_entry.getTitle(locale)
184 article = renderer.getArticle()
185 description = article.getDescription(locale)
186 ddm_template_key = article.getDDMTemplateKey()
187 view_url = "${themeDisplay.getPathFriendlyURLPublic()}${themeDisplay.getSiteGroup().getFriendlyURL()}/-/${renderer.getUrlTitle()}"
188 />
189 <#if cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)??>
190 <#assign smallImageUrlSide = cur_entry.getAssetRenderer().getThumbnailPath(renderRequest)>
191 <#else>
192 <#assign smallImageUrlSide = "/documents/37638/39612/kinhte-xahoi-bg.jpg">
193 </#if>
194
195 <#-- <a href="${view_url}" class="w-100 h-100"> -->
196 <img src="${smallImageUrlSide}"
197 class="slide-ttdl-slider <#if cur_entry?index == 0>active</#if>"
198 data-index="${cur_entry?index}"
199 data-title="${title}"
200 data-description="${description}"
201 data-url="${view_url}"
202 >
203 <#-- </a> -->
204
205 </#if>
206 </#list>
207 </div>
208
209 <!-- Block content -->
210 <div class="text-content-ttdl-slider">
211 <a href="${view_url}">
212 <div class="text-wrapper-ttdl-slider">
213 <h2 id="title-ttdl-slider">${title}</h2>
214 <p id="description-ttdl-slider">${description}</p>
215 </div>
216 </a>
217 <div class="navigation-ttdl-slider">
218 <div style="display: flex; align-items: center;">
219 <button class="prev-ttdl-slider" style="width: 30px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(-1)">❮</button>
220 <button class="next-ttdl-slider" style="width: 30px; margin-left: 10px; height: 30px; border-radius: 100%; display: flex; justify-content: center; align-items: center;" onclick="changeSlideTtdl(1)">❯</button>
221 </div>
222 <div class="progress-container-ttdl-slider">
223 <#if entries?size gt 0>
224 <#list entries as entry>
225 <span class="progress-dot-ttdl-slider" onclick="currentSlideTtdl(${entry?index})"></span>
226 </#list>
227 </#if>
228 </div>
229 </div>
230 </div>
231 </#if>
232</div>
233
234<script>
235 let slideIndexTtdl = 1; // Bắt đầu từ slide đầu tiên
236
237 function changeSlideTtdl(n) {
238 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
239 if (slidesTtdl.length === 0) return;
240
241 // Cập nhật slideIndexTtdl và đảm bảo nó quay vòng ngay lập tức
242 slideIndexTtdl = (slideIndexTtdl + n) % slidesTtdl.length;
243 if (slideIndexTtdl < 0) slideIndexTtdl += slidesTtdl.length;
244
245 updateSlidesTtdlSlider();
246 }
247
248 function currentSlideTtdl(n) {
249 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
250 if (slidesTtdl.length === 0) return;
251 slideIndexTtdl = n % slidesTtdl.length;
252 updateSlidesTtdlSlider();
253 }
254
255
256
257 function updateSlidesTtdlSlider() {
258 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
259 let dotsTtdl = document.querySelectorAll(".progress-dot-ttdl-slider");
260 let titleElement = document.getElementById("title-ttdl-slider");
261 let descriptionElement = document.getElementById("description-ttdl-slider");
262
263 if (slidesTtdl.length === 0) return;
264
265 slidesTtdl.forEach((slide) => {
266 slide.classList.remove("active", "next", "next-next");
267 });
268
269 let current = slideIndexTtdl;
270 let next = (slideIndexTtdl + 1) % slidesTtdl.length;
271 let nextNext = (slideIndexTtdl + 2) % slidesTtdl.length;
272
273 slidesTtdl[current].classList.add("active");
274
275 if (slidesTtdl.length > 1) slidesTtdl[next].classList.add("next");
276 if (slidesTtdl.length > 2) slidesTtdl[nextNext].classList.add("next-next");
277
278 if (titleElement && descriptionElement) {
279 let activeSlide = slidesTtdl[slideIndexTtdl];
280 titleElement.textContent = activeSlide.getAttribute("data-title");
281 descriptionElement.innerHTML = activeSlide.getAttribute("data-description") || "";
282 }
283
284 dotsTtdl.forEach((dot, index) => {
285 dot.classList.toggle("active", index === slideIndexTtdl);
286 });
287 }
288
289
290 // Khởi tạo slider khi trang được tải
291 document.addEventListener("DOMContentLoaded", function () {
292 if (document.querySelectorAll(".slide-ttdl-slider").length > 0) {
293 updateSlidesTtdlSlider();
294 }
295 });
296
297
298 document.addEventListener("DOMContentLoaded", function () {
299 let titleElement = document.getElementById("title-ttdl-slider");
300 let descriptionElement = document.getElementById("description-ttdl-slider");
301 let sliderContainer = document.querySelector(".slider-container-ttdl-slider"); // Thêm sự kiện cho ảnh
302
303 function navigateToActiveArticle() {
304 let slidesTtdl = document.querySelectorAll(".slide-ttdl-slider");
305 let activeSlide = slidesTtdl[slideIndexTtdl];
306 let url = activeSlide.getAttribute("data-url");
307 if (url) {
308 window.location.href = url;
309 }
310 }
311
312 titleElement.addEventListener("click", navigateToActiveArticle);
313 descriptionElement.addEventListener("click", navigateToActiveArticle);
314 sliderContainer.addEventListener("click", navigateToActiveArticle); // Bắt sự kiện click vào ảnh
315});
316
317</script>
318<style>
319
320 .slide-ttdl-slider: hover {
321 cursor: pointer;
322 }
323 .slideshow-container-ttdl-slider {
324 display: flex;
325 width: 100%;
326 height: 410px;
327 }
328 .text-content-ttdl-slider {
329 width: 40% ;
330 padding: 20px 20px 0 0;
331 background: white;
332 display: flex;
333 flex-direction: column;
334 justify-content: space-between;
335 box-sizing: border-box;
336 }
337 .text-content-ttdl-slider h2 {
338 font-size: clamp(24px, 3vw, 16px);
339 color: #035FB5;
340 }
341
342 .text-content-ttdl-slider p {
343 font-size: clamp(16px, 2vw, 12px);
344 color: #2E2E2E; ;
345 }
346 .slider-container-ttdl-slider {
347 display: flex;
348 width: 60%;
349 height: 410px;
350 align-items: center;
351 justify-content: left;
352 position: relative;
353 overflow: hidden;
354 }
355 .slides-ttdl-slider {
356 position: relative;
357 display: flex;
358 align-items: center;
359 }
360 .slide-ttdl-slider {
361 position: absolute;
362 transition: transform 0.5s ease, opacity 0.5s ease;
363 opacity: 0;
364 }
365 .slide-ttdl-slider.active {
366 width: 545px;
367 height: 410px;
368 z-index: 3;
369 opacity: 1;
370 transform: translateX(0);
371 }
372 .slide-ttdl-slider.next {
373 width: 453px;
374 height: 340px;
375 z-index: 2;
376 opacity: 1;
377 transform: translateX(300px);
378 }
379 .text-content-ttdl-slider .highlight-ttdl-slider {
380 font-weight: bold;
381 }
382 .slide-ttdl-slider.next-next {
383 width: 355px;
384 height: 265px;
385 z-index: 1;
386 opacity: 1;
387 transform: translateX(550px);
388 }
389 .navigation-ttdl-slider {
390 display: flex;
391 justify-content: space-between;
392 align-items: center;
393 margin-top: 10px;
394 }
395 .progress-container {
396 display: flex;
397 justify-content: center;
398 align-items: center;
399 gap: 10px;
400 }
401 .progress-dot {
402 width: 30px;
403 height: 10px;
404 background-color: #EBEBEB;
405 border-radius: 10px;
406 border: 1px solid #ACB0B3;
407 cursor: pointer;
408 }
409 .progress-dot.active {
410 width: 12px;
411 height: 12px;
412 background-color: #DE6F18;
413 }
414
415 .prev-ttdl-slider, .next-ttdl-slider {
416 cursor: pointer;
417 padding: 10px;
418 font-size: 18px;
419 background-color: #E3E5E6;
420 /* color: white; */
421 border: none;
422 }
423
424 .prev-ttdl-slider, .next-ttdl-slider {
425 background-color: #E3E5E6;
426 border: 3px solid #ACB0B3;
427 color: #ACB0B3;
428 }
429 .prev-ttdl-slider:hover, .next-ttdl-slider:hover {
430 background-color: #F4CFB2;
431 border: 3px solid #DE6F18;
432 color: #DE6F18;
433 }
434 .text-wrapper-ttdl-slider {
435 padding-right: 5px;
436 }
437
438
439
440 /* css responsive */
441 @media (max-width: 768px) {
442 .slideshow-container-ttdl-slider {
443 flex-direction: column;
444 align-items: center;
445 height: auto;
446 }
447
448 .slider-container-ttdl-slider {
449 width: 100%;
450 height: auto;
451 position: unset;
452 order: -1; /* Đưa hình ảnh lên trên */
453 display: flex;
454 justify-content: center;
455 align-items: center;
456 }
457
458 .slide-ttdl-slider {
459 width: 90%;
460 height: auto; /* Đảm bảo tỷ lệ hình ảnh */
461 max-height: 300px; /* Giới hạn chiều cao để tránh quá lớn */
462 object-fit: cover; /* Giữ nguyên tỷ lệ hình ảnh */
463 display: block;
464 margin: 0 auto; /* Canh giữa hình ảnh */
465 position: static;
466 }
467
468 .text-content-ttdl-slider {
469 width: 100%;
470 padding: 15px;
471 text-align: center;
472 }
473}
474
475@media (max-width: 480px) {
476 .slider-container-ttdl-slider {
477 height: auto;
478
479 }
480
481 .slide-ttdl-slider {
482 width: 90%;
483 height: 250px; /* Hoặc có thể đặt một giá trị phù hợp */
484 max-height: 300px;
485 object-fit: cover;
486 display: block;
487 margin: 0 auto;
488 position: unset;
489 }
490
491 .text-content-ttdl-slider {
492 padding: 10px;
493 }
494}
495
496
497</style>
