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							 <#if player.photo?has_content> 

20							<img loading="lazy" class="img-player" data-fileentryid="${player.photo.fileEntryId}" 

21									src="${player.background.url}?imageThumbnail=2" alt="${player.firstName} ${player.lastName}"> 

22								 </#if> 

23						</div> 

24                    </#if> 

25					<div class="player-info-container"> 

26						<div class="details"> 

27							<h3 class="player-name"> 

28								<span>${player.firstName}</span> 

29								<span>${player.lastName}</span> 

30							</h3> 

31							<p class="caption position">${player.getPosition(locale)}</p> 

32							<span class="number">${'#' + player.number}</span> 

33						</div> 

34					</div> 

35				</a> 

36			</div> 

37        </#list> 

38	</div> 

39</div> 

40<script> 

41    (function () { 

42        function initPlayersSlider(instanceId) { 

43            const nav_prev = document.querySelector('#' + instanceId + ' .nav-left'); 

44            const nav_next = document.querySelector('#' + instanceId + ' .nav-right'); 

45 

46            tns({ 

47                container: '.players-carousel .tns-carousel', 

48                center: true, 

49                loop: false, 

50                mouseDrag: true, 

51                nav: false, 

52                items: 1, 

53                prevButton: nav_prev, 

54                nextButton: nav_next, 

55                edgePadding: 15, 

56                gutter: 10, 

57                preventScrollOnTouch: 'auto', 

58                responsive: { 

59                    480: { 

60                        items: 2, 

61                        center: false 

62                    }, 

63                    768: { 

64                        items: 3, 

65                        center: false 

66                    }, 

67                    992: { 

68                        items: 4, 

69                        center: false 

70                    }, 

71                    1366: { 

72                        items: 4, 

73                        gutter: 20, 

74                        center: false 

75                    } 

76                } 

77            }); 

78        } 

79 

80        initPlayersSlider('p_p_id${themeDisplay.getPortletDisplay().getNamespace()}'); 

81    })(); 

82</script>