1<style>
2.rtl .press-slider-dots ul.slick-dots, .news-slider-dots ul.slick-dots {
3 display: flex !important;
4 width: 100%;
5 padding-left: 155px;
6 padding-right: 0;
7}
8.rtl .news-slider-dots ul.slick-dots {
9 padding-right: 0;
10 padding-left: 155px;
11}
12
13.rtl button.slick-prev.slick-arrow {
14 left: 40px;
15 right: auto;
16}
17
18.rtl button.slick-arrow {
19 position: absolute;
20 z-index: 9;
21 font-size: 0;
22 line-height: 0;
23 width: 32px;
24 height: 32px;
25 border: 0;
26 bottom: -20px;
27 left: 80px;
28 right: auto;
29 background-color: transparent;
30}
31.rtl .news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box {
32 padding-top: 18px;
33 padding-bottom: 18px;
34 padding-right: 20px;
35 padding-left:auto;
36}
37
38 .news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box {
39 padding-top: 18px;
40 padding-bottom: 18px;
41 padding-left: 20px;
42}
43
44.news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box .events-time-box {
45 gap: 8px;
46}
47
48.news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box .events-time-box p {
49 height: 14px;
50}
51
52.news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box .events-time-box p span {
53 color: var(--dcc_dark_70);
54}
55
56.news-and-press-slider .news-and-press-card .card-body-item .events-card-content .event-title {
57 margin-bottom: 16px;
58 display: -webkit-box;
59 -webkit-box-orient: vertical;
60 -webkit-line-clamp: 2;
61 overflow: hidden;
62 max-width: 443px;
63}
64
65.news-and-press-slider .news-and-press-card .card-body-item .events-card-content .event-title a {
66 text-decoration: none;
67 color: var(--dcc_dark_blue);
68}
69
70.news-and-press-slider .news-and-press-card .card-body-item .events-card-content .event-location-item {
71 gap: 8px;
72 max-width: 485px;
73}
74
75.news-and-press-slider .news-and-press-card .card-body-item .events-card-content .event-location-item .event-location-title {
76 color: var(--dcc_dark_70);
77}
78
79.news-and-press-slider .news-and-press-card .card-body-item .events-card-content .item-link {
80 color: var(--dcc_purple_50);
81 font-weight: 400;
82}
83
84
85.news-and-press-slider .news-and-press-card .events-date-box {
86 padding: 10px 10px 8px;
87 border-radius: 6px;
88 background-color: var(--dcc_white);
89 position: absolute;
90 left: 18px;
91 top: 12px;
92 max-width: 105px;
93 min-width: 105px;
94}
95
96.news-and-press-slider .news-and-press-card .events-date-box img {
97 width: 100%;
98 height: 100%;
99 border-radius: 6px;
100}
101
102.news-and-press-slider .news-and-press-card .events-date-box .date-title {
103 border-bottom: 1px solid var(--dcc_light_border);
104 margin-bottom: 6px;
105 color: var(--dcc_purple);
106 font-size: 38px;
107 font-weight: 400;
108 line-height: 46px;
109}
110
111.portlet-decorate .portlet-content {
112 background: transparent;
113 border-color: transparent;
114 border-style: none;
115 border-width: 0;
116 padding: 0;
117 word-wrap: break-word;
118}
119
120button.slick-arrow {
121 position: absolute;
122 z-index: 9;
123 font-size: 0;
124 line-height: 0;
125 width: 32px;
126 height: 32px;
127 border: 0;
128 bottom: -20px;
129 right: 40px;
130 background-color: transparent;
131}
132
133button.slick-prev.slick-arrow {
134 right: 80px;
135}
136
137button.slick-arrow::after {
138 position: absolute;
139 content: '';
140 background-image: url(/documents/d/dubaicommercecity/left-black-1);
141 width: 19px;
142 height: 18px;
143 left: 50%;
144 top: 50%;
145 transform: translate(-50%, -50%);
146}
147
148button.slick-arrow.slick-next::after {
149 background-image: url(/documents/d/dubaicommercecity/right-black-1);
150}
151
152.rtl .slick-progress-bar.steps-slider ul.slick-dots {
153 padding-left: 155px;
154 padding-right: 0;
155}
156
157.rtl .steps-to-success-wrapper button.slick-arrow {
158 left: 40px;
159 right: auto;
160 transform: rotate(180deg);
161}
162
163.rtl .steps-to-success-wrapper button.slick-prev.slick-arrow {
164 left: 80px;
165 right: auto;
166 transform: rotate(180deg);
167}
168.news-and-press-list-section {
169 padding-left: 40px;
170 overflow: hidden;
171 padding-top: 63px;
172 padding-bottom: 80px;
173}
174
175.news-and-press-list-section .section-header {
176 height: 100%;
177 padding-right: 20px;
178 padding-bottom: 70px;
179}
180
181.news-and-press-slider .slick-list {
182 padding-right: 40px;
183 padding-bottom: 70px;
184}
185
186.news-and-press-slider .news-and-press-card {
187 border-radius: 6px;
188 border: 1px solid var(--dcc_line_divider);
189 padding: 6px 6px 6px 6px;
190 outline: none;
191 box-shadow: none;
192 background-color: var(--dcc_white);
193}
194
195.news-and-press-card .card-body-item .card-img-box {
196 width: 454px;
197 height: 332px;
198 flex-shrink: 0;
199 overflow: hidden;
200 border-radius: 6px;
201}
202
203.news-and-press-card .card-body-item .card-img-box img {
204 width: 100%;
205 height: 100%;
206 transition: all 0.5s linear;
207 object-fit: cover;
208}
209
210.news-card:hover .card-body-item .card-img-box img {
211 transform: scale(1.1);
212}
213
214.news-and-press-card .card-body-item .card-content-box {
215 padding: 18px 16px;
216 max-width: 500px;
217}
218
219.news-and-press-card .card-body-item .tags-list {
220 gap: 16px;
221}
222
223.news-and-press-card .card-body-item .tags-list li.section-tag {
224 color: var(--dcc_dark_70);
225}
226
227.news-and-press-card .card-body-item .tags-list li.section-tag::before {
228 background-color: var(--dcc_dark_70)
229}
230
231.news-and-press-card .card-body-item .card-title {
232 margin-bottom: 16px;
233 display: -webkit-box;
234 -webkit-box-orient: vertical;
235 -webkit-line-clamp: 2;
236 overflow: hidden;
237}
238
239.news-and-press-card .card-body-item .card-title a {
240 text-decoration: none;
241 color: var(--dcc_dark_blue);
242}
243
244.news-and-press-card .card-body-item .card-desc {
245 display: -webkit-box;
246 -webkit-box-orient: vertical;
247 -webkit-line-clamp: 2;
248 overflow: hidden;
249}
250
251.news-and-press-card .card-body-item .item-link {
252 color: var(--dcc_purple_50);
253 font-weight: 400;
254}
255
256.press-slider-dots ul.slick-dots,
257.news-slider-dots ul.slick-dots {
258 display: flex !important;
259 width: 100%;
260 padding-right: 155px;
261}
262
263.press-slider-dots ul.slick-dots li,
264.news-slider-dots ul.slick-dots li {
265 width: 100%;
266 line-height: 0;
267 height: 1px;
268}
269
270.press-slider-dots ul.slick-dots li button,
271.news-slider-dots ul.slick-dots li button {
272 width: 100%;
273 font-size: 0;
274 border: 0;
275 padding: 0;
276 height: 1px;
277 background-color: var(--dcc_dark_b_gray);
278 position: relative;
279}
280
281.press-slider-dots ul.slick-dots li button::after,
282.news-slider-dots ul.slick-dots li button::after {
283 position: absolute;
284 content: '';
285 width: 100%;
286 left: 0;
287 right: 0;
288 height: 3px;
289 background-color: var(--dcc_dark_blue);
290 z-index: 2;
291 top: -1px;
292 transition: all 0.5s ease-in-out;
293}
294
295.press-slider-dots ul.slick-dots li.slick-active~li button::after,
296.news-slider-dots ul.slick-dots li.slick-active~li button::after {
297 background-color: transparent;
298 width: 0;
299}
300
301@media screen and (max-width:1199px) {
302 .news-and-press-list-section {
303 padding-left: 0px;
304 }
305
306 .news-and-press-slider .slick-list {
307 padding-left: 40px;
308 padding-bottom: 40px;
309 }
310
311 .news-and-press-list-section .section-header {
312 padding-right: 0px;
313 padding-left: 40px;
314 height: unset;
315 padding-bottom: 0;
316 }
317
318 .news-and-press-list-section .view-all-wrap {
319 padding-left: 40px;
320 padding-right: 40px;
321 }
322}
323
324@media screen and (max-width:991px) {
325 .news-and-press-card .card-body-item .card-img-box {
326 width: 280px;
327 height: 280px;
328 }
329 .news-and-press-slider .news-and-press-card .events-date-box .date-title {
330 font-size: 31px;
331 line-height: 38px;
332 }
333}
334
335@media screen and (max-width:767px) {
336 .news-and-press-list-section {
337 padding-top: 50px;
338 padding-bottom: 50px;
339 }
340
341 .news-and-press-list-section .section-header {
342 padding-left: 16px;
343 padding-right: 16px;
344 }
345
346 .news-and-press-slider .slick-list {
347 padding-left: 16px;
348 padding-right: 16px;
349 padding-bottom: 24px;
350 }
351
352 .news-and-press-slider .news-and-press-card .events-date-box {
353 display: none;
354 }
355
356 .news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box .events-time-box {
357 margin-bottom: 8px;
358 }
359
360 .news-and-press-slider .news-and-press-card .card-body-item .events-card-content-box {
361 padding-bottom: 0;
362 padding-top: 8px;
363 }
364
365 .news-and-press-slider .news-and-press-card .card-body-item .events-card-content .event-location-item {
366 margin-bottom: 40px;
367 }
368
369 .news-and-press-slider .news-and-press-card {
370 padding: 12px 12px;
371 }
372
373 .news-and-press-card .card-body-item .card-img-box {
374 width: 100%;
375 height: 262px;
376 }
377
378 .news-and-press-card .card-body-item .card-content-box {
379 padding: 8px 0px 0;
380 }
381
382 .news-and-press-card .card-body-item .tags-list {
383 margin-bottom: 40px;
384 }
385
386 .news-and-press-card .card-body-item .card-title {
387 margin-bottom: 6px;
388 }
389
390 .news-and-press-card .card-body-item .card-desc {
391 margin-bottom: 16px;
392 }
393
394 .news-and-press-list-section .view-all-wrap {
395 padding-left: 16px;
396 padding-right: 16px;
397
398 }
399}
400</style>
401<div class="mx-n1 news-and-press-slider" id="newsSlider">
402<#if entries?has_content>
403 <#list entries as curEntry>
404 <#assign entryCategories = curEntry.getCategories()?map(category -> category)>
405 <#assign assetRenderer = curEntry.getAssetRenderer()>
406 <#if assetRenderer??>
407 <#assign docXml = saxReaderUtil.read(assetRenderer.getArticle().getContentByLocale(locale)) />
408 <#assign viewUrl = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, curEntry) />
409 <#assign viewUrl = assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewUrl) />
410 <#assign image = docXml.valueOf("//dynamic-element[@field-reference='cardImage']/dynamic-content") />
411 <#assign title = docXml.valueOf("//dynamic-element[@field-reference='title']/dynamic-content") />
412 <#assign time = docXml.valueOf("//dynamic-element[@field-reference='time']/dynamic-content") />
413 <#assign createdDate = docXml.valueOf("//dynamic-element[@field-reference='date']/dynamic-content") />
414 <#assign location = docXml.valueOf("//dynamic-element[@field-reference='location']/dynamic-content") />
415 <#if image?has_content>
416 <#assign imageUrl = jsonFactoryUtil.createJSONObject(image).getString("url") />
417 <#else>
418 <#assign imageUrl = 'default-image.jpg' />
419 </#if>
420 <#assign publishDateTime = curEntry.publishDate?datetime>
421 <#assign currentDateTime = .now>
422 <#assign millisecondsDifference = currentDateTime?long - publishDateTime?long >
423 <#assign secondsDifference = millisecondsDifference / 1000 >
424 <#assign minutesDifference = secondsDifference / 60 >
425 <#assign hoursDifference = minutesDifference / 60 >
426 <#assign daysDifference = hoursDifference / 24 >
427 <#assign monthDifference = daysDifference / 30 >
428 <#assign yearsDifference = monthDifference / 12 >
429 <#assign parsedDate = createdDate?date("yyyy-MM-dd")?default("")>
430 <div class="col-12 px-1">
431 <div class="news-and-press-card">
432 <div class="card-body-item d-md-flex d-block">
433 <div class="card-img-box">
434 <div class="events-date-box">
435 <div class="date-title">
436 ${dateUtil.getDate(parsedDate, "d", locale)}
437 <p>${dateUtil.getDate(parsedDate, "MMMM", locale)}</p>
438 <p>${dateUtil.getDate(parsedDate, "yyyy", locale)}</p>
439 </div>
440 </div>
441 <img src="${imageUrl}" alt="${title}" width="324" height="324">
442 </div>
443 <div class="events-card-content-box d-flex justify-content-between flex-column">
444 <div class="events-time-box d-flex align-items-center">
445 <img src="/documents/d/dubaicommercecity/clock" alt="clock" width="24" height="24">
446 <p><span>${languageUtil.get(locale, 'time')} | </span>${time}</p>
447 </div>
448
449 <div class="events-card-content d-flex flex-column">
450 <div class="event-location-item d-flex align-items-start order-md-2">
451 <img src="/documents/d/dubaicommercecity/location" alt="location" width="24" height="24">
452 <p class="event-location">
453 <span class="event-location-title">${languageUtil.get(locale, 'location')} | </span> ${location}
454 </p>
455 </div>
456 <p class="event-title font-size-medium order-md-1">
457 <a href="${viewUrl}" tabindex="0">${title}</a>
458 </p>
459 <a href="${viewUrl}" class="item-link d-md-none d-flex align-items-center justify-content-between order-3" tabindex="0">
460 ${languageUtil.get(locale, 'explore')}
461 <img src="/documents/d/dubaicommercecity/purple-link-arrow-1" alt="item-link" width="24" height="24">
462 </a>
463 </div>
464 </div>
465 </div>
466 </div>
467 </div>
468 </#if>
469 </#list>
470 </#if>
471</div>
472<script>
473$(document).ready(function () {
474 if ($('#newsSlider').length) {
475 // Remove existing dots
476 $('.news-slider-dots').empty();
477
478 $('#newsSlider').slick({
479 slidesToShow: 1.2,
480 slidesToScroll: 1,
481 autoplay: false,
482 autoplaySpeed: 3000,
483 speed: 1000,
484 infinite: false,
485 dots: true,
486 arrows: true,
487 pauseOnHover: false,
488 appendDots: $('.news-slider-dots'),
489 customPaging: function (slider, i) {
490 return '<button class="dot">' + (i + 1) + '</button>';
491 },
492 responsive: [
493 {
494 breakpoint: 1200,
495 settings: {
496 dots: false,
497 arrows: false,
498 }
499 },
500 {
501 breakpoint: 768,
502 settings: {
503 slidesToShow: 1.6,
504 dots: false,
505 arrows: false,
506 }
507 },
508 {
509 breakpoint: 576,
510 settings: {
511 slidesToShow: 1.2,
512 dots: false,
513 arrows: false,
514 }
515 }
516 ]
517 });
518
519 $(window).on('resize', function () {
520 $('#newsSlider').slick('setPosition');
521 });
522 }
523
524 if ($('html').hasClass('rtl')) {
525 if ($('#newsSlider').length) {
526 $('#newsSlider').slick('slickSetOption', 'rtl', true, true);
527 }
528 }
529});
530</script>
