1<#assign playerProfileURLBuilder = serviceLocator.findService("com.neutrica.smotai.clubs.commons.util.URLBuilder")/>
2<#setting locale = locale>
3<#assign friendlyUrl="" />
4
5<div class="players-carousel carousel-margin-right-big">
6 <div class="tns-controls">
7 <button class="nav-left icon-slg-chevron-left"></button>
8 <button class="nav-right icon-slg-chevron-right"></button>
9 </div>
10 <div class="tns-carousel">
11 <#list entries as player>
12 <#if singlePlayerPageId?has_content>
13 <#assign friendlyUrl = playerProfileURLBuilder.buildPlayerProfileURL(themeDisplay.getPlid(), player.id, player.firstName, player.lastName, player.getSeasonName(locale), singlePlayerPageId, renderResponse) />
14 </#if>
15 <div>
16 <a class="player animation-fade-in-left-trigger" href="${friendlyUrl}">
17 <#if player.background?has_content>
18 <div class="photo">
19 <img loading="lazy" class="img-player" data-fileentryid="${player.photo.fileEntryId}"
20 src="${player.background.url}?imageThumbnail=2" alt="${player.firstName} ${player.lastName}">
21 </div>
22 </#if>
23 <div class="player-info-container">
24 <div class="details">
25 <h3 class="player-name">
26 <span>${player.firstName}</span>
27 <span>${player.lastName}</span>
28 </h3>
29 <p class="caption position">${player.getPosition(locale)}</p>
30 <span class="number">${'#' + player.number}</span>
31 </div>
32 </div>
33 </a>
34 </div>
35 </#list>
36 </div>
37</div>
38<script>
39 (function () {
40 function initPlayersSlider(instanceId) {
41 const nav_prev = document.querySelector('#' + instanceId + ' .nav-left');
42 const nav_next = document.querySelector('#' + instanceId + ' .nav-right');
43
44 tns({
45 container: '.players-carousel .tns-carousel',
46 center: true,
47 loop: false,
48 mouseDrag: true,
49 nav: false,
50 items: 1,
51 prevButton: nav_prev,
52 nextButton: nav_next,
53 edgePadding: 15,
54 gutter: 10,
55 preventScrollOnTouch: 'auto',
56 responsive: {
57 480: {
58 items: 2,
59 center: false
60 },
61 768: {
62 items: 3,
63 center: false
64 },
65 992: {
66 items: 4,
67 center: false
68 },
69 1366: {
70 items: 4,
71 gutter: 20,
72 center: false
73 }
74 }
75 });
76 }
77
78 initPlayersSlider('p_p_id${themeDisplay.getPortletDisplay().getNamespace()}');
79 })();
80</script>