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