Test layout

1<#if slide.getSiblings()?has_content> 

2    <#assign swiperId = 'swiper' + .vars['reserved-article-id'].data /> 

3     

4    <div class="swiper<#if getterUtil.getBoolean( showPager.getData() )> pagination-on pagination-inset</#if>" id="${swiperId}"> 

5        <div class="swiper-wrapper"> 

6            <#list slide.getSiblings() as curSlide> 

7                <#if curSlide.image.getData()?? && curSlide.image.getData() != ''> 

8                    <div class="swiper-slide"> 

9                        <#assign link = '' 

10                                 linkText = '' /> 

11                        <#if curSlide.linkToPage.getData()?? && curSlide.linkToPage.getData() != ''>   

12                            <#assign link = curSlide.linkToPage.getFriendlyUrl() /> 

13                            <#if curSlide.linkToPage.text.getData()?? && curSlide.linkToPage.text.getData() != ''>  

14                                <#assign linkText = curSlide.linkToPage.text.getData() /> 

15                            </#if> 

16                        </#if> 

17                     

18                        <#if link != ''> 

19                            <a href="${link}"<#if linkText != ''> title="${linkText}"</#if>> 

20                        </#if> 

21                        <img alt="${curSlide.image.getAttribute("alt")}" src="${curSlide.image.getData()}" /> 

22                        <#if link != ''> 

23                            </a> 

24                        </#if> 

25                    </div> 

26                </#if> 

27            </#list> 

28        </div> 

29         

30        <#if getterUtil.getBoolean( showPager.getData() )> 

31	        <#-- swiper pagination --> 

32	        <div class="swiper-pagination"></div> 

33	   </#if> 

34	   <#if getterUtil.getBoolean( showNavigation.getData() )> 

35	        <#-- swiper navigation --> 

36	        <div class="swiper-button-prev"></div> 

37	        <div class="swiper-button-next"></div> 

38	   </#if> 

39    </div> 

40     

41    <script type="text/javascript"> 

42    /* <![CDATA[ */ 

43     

44    	$(document).ready(function () { 

45    		if ( ${getterUtil.getBoolean( autoplay.getData() )?c} == true ) { 

46    	        var autoplay = { 

47                    delay: ${autoplay.speed.getData()?eval}, 

48                    disableOnInteraction: true 

49    	        } 

50    	   } 

51    	   else { 

52    	       var autoplay = false; 

53    	   } 

54			var loop = ${getterUtil.getBoolean( loop.getData() )?c}; 

55			var effect = '${effect.getData()}'; 

56			var crossFade = ( effect == 'fade' ) ? true : false; 

57    	 

58			// init Swiper 

59			var superHeroSwiper = new Swiper('#${swiperId}', { 

60				centeredSlides: true, 

61				speed: 1000, 

62	    		autoplay: autoplay, 

63			    loop: loop, 

64			    effect: effect, 

65			    fadeEffect: { 

66			        crossFade: crossFade 

67			    }, 

68				pagination: { 

69			        el: '.swiper-pagination', 

70			        clickable: true, 

71			    }, 

72			    navigation: { 

73					nextEl: '.swiper-button-next', 

74					prevEl: '.swiper-button-prev', 

75			    }, 

76			    preloadImages: false, 

77			    watchOverflow: true 

78		    }); 

79		}); 

80		 

81    /* ]]> */ 

82    </script> 

83</#if>