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>