1<#if entries?has_content> 

2 

3<style> 

4.news-splide .splide__arrows { 

5  opacity: 0; 

6  visibility: hidden; 

7} 

8.news-splide .splide__arrows .splide__arrow { 

9  opacity: 1; 

10  background: transparent; 

11  text-shadow: none; 

12} 

13.news-splide .splide__arrows .splide__arrow--next, 

14.news-splide .splide__arrows .splide__arrow--prev { 

15  width: 2em; 

16  height: 2em; 

17  display: flex; 

18  align-items: center; 

19  justify-content: center; 

20  background: #af2b3d; 

21  top: 10em; 

22} 

23.news-splide .splide__arrows .splide__arrow--next { 

24  right: -1em; 

25} 

26.news-splide .splide__arrows .splide__arrow--next div::before { 

27  margin-left: 0.2em; 

28} 

29.news-splide .splide__arrows .splide__arrow--prev { 

30  left: -0.9em; 

31} 

32.news-splide .splide__arrows .splide__arrow--prev div::before { 

33  margin-right: 0.2em; 

34} 

35.news-splide .splide__pagination { 

36  bottom: -2.4em; 

37  /*opacity: 0; 

38  visibility: hidden;*/ 

39} 

40.news-splide .splide__pagination .splide__pagination__page { 

41  background: #bcbcbc; 

42  opacity: 1; 

43} 

44.news-splide .splide__pagination .is-active { 

45  background: #213e73; 

46  transform: scale(1); 

47} 

48.news-splide .splide__track { 

49  overflow: visible; 

50} 

51.news-splide .splide__track .splide__list .splide__slide { 

52  background: #ffffff; 

53  box-shadow: 0px 1px 0.31em rgba(0, 0, 0, 0.1); 

54  transition: all ease-in-out 0.3s; 

55  opacity: 0; 

56  text-decoration: none; 

57  position: relative; 

58  overflow: hidden; 

59  visibility: hidden; 

60} 

61.news-splide .splide__track .splide__list .splide__slide.is-visible { 

62  opacity: 1; 

63  visibility: visible; 

64} 

65.news-splide .splide__track .splide__list .splide__slide:hover { 

66  transform: translateY(-0.7em); 

67  box-shadow: 0px 0.31em 0.93em rgba(0, 0, 0, 0.1); 

68} 

69.news-splide .splide__track .splide__list .splide__slide:hover .parent-img img { 

70  transform: scale(1.15); 

71} 

72.news-splide .splide__track .splide__list .splide__slide::before { 

73  position: absolute; 

74  left: 2em; 

75  right: 2em; 

76  content: ""; 

77  bottom: calc(-1em + 2px); 

78  height: 1em; 

79  background: #2c5093; 

80  border-radius: 5px; 

81} 

82.news-splide .splide__track .splide__list .splide__slide .parent-img { 

83  width: 100%; 

84  height: 10.06em; 

85  overflow: hidden; 

86} 

87.news-splide .splide__track .splide__list .splide__slide .parent-img img { 

88  width: 100%; 

89  height: 100%; 

90  object-fit: cover; 

91  transition: all ease-in-out 0.3s; 

92} 

93.news-splide .splide__track .splide__list .splide__slide .date { 

94  font-size: 0.562em; 

95  color: #2c5093; 

96  text-align: center; 

97  margin: 1.5em 0 1.3em 0; 

98} 

99.news-splide .splide__track .splide__list .splide__slide .date .kord-icon-time { 

100  margin-right: 0.5em; 

101  position: relative; 

102  top: 0.02em; 

103} 

104html.rtl .news-splide .splide__track .splide__list .splide__slide .date .kord-icon-time { 

105  margin-right: 0; 

106  margin-left: 0.5em; 

107} 

108.news-splide .splide__track .splide__list .splide__slide .date .kord-icon-time::before { 

109  color: #2c5093; 

110} 

111.news-splide .splide__track .splide__list .splide__slide .title { 

112  margin: 0.8em 0.93em 0.25em 0.93em; 

113  font-size: 1em; 

114  color: #af2b3d; 

115  height: 1.4em; 

116  overflow: hidden; 

117} 

118.news-splide .splide__track .splide__list .splide__slide .description { 

119  font-size: 1em; 

120  line-height: 1.35em; 

121  color: #213e73; 

122  overflow: hidden; 

123  height: 3.95em; 

124  margin: 0 0.93em 0.65em 0.93em; 

125} 

126 

127@media only screen and (max-width: 1279px) { 

128  .news-splide .splide__arrows { 

129    opacity: 1; 

130    visibility: visible; 

131  } 

132} 

133 

134@media only screen and (max-width: 767px) { 

135  .news-splide { 

136    font-size: 15px; 

137    margin-bottom: 2em; 

138  } 

139  .news-splide .splide__pagination { 

140    bottom: -2.4em; 

141    opacity: 1; 

142    visibility: visible; 

143  } 

144} 

145@media only screen and (max-width: 575px) { 

146  .news-splide { 

147    font-size: 13px; 

148    width: 21.3em; 

149    margin-left: auto; 

150    margin-right: auto; 

151    max-width: 100%; 

152  } 

153} 

154</style> 

155 

156<div class="news-splide sp-${themeDisplay.getPortletDisplay().getId()} splide"> 

157    <div class="splide__arrows"> 

158        <button class="splide__arrow splide__arrow--prev"> 

159            <div class="kord-icon-prev"></div> 

160        </button> 

161        <button class="splide__arrow splide__arrow--next"> 

162            <div class="kord-icon-next"></div> 

163        </button> 

164    </div> 

165    <div class="splide__track"> 

166        <div class="splide__list"> 

167             

168            <#list entries as curEntry> 

169                <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse,curEntry,true)}" class="splide__slide"> 

170                    <#assign  

171                        assetRenderer = curEntry.getAssetRenderer()  

172                        assetObject = assetRenderer.getAssetObject() 

173                        assetType = assetRenderer.getType() 

174                    />  

175                    <@liferay_journal["journal-article"] 

176                        articleId=assetObject.getArticleId() 

177                        ddmTemplateKey="37979" 

178                        groupId=assetObject.getGroupId() 

179                    /> 

180                </a> 

181            </#list> 

182             

183        </div> 

184    </div> 

185</div> 

186 

187<script> 

188     

189    new Splide(".sp-${themeDisplay.getPortletDisplay().getId()}", { 

190        direction: document.getElementsByTagName("html")[0].getAttribute("dir"), 

191        perPage: 4, 

192        gap: "1.56em", 

193        arrows:false, 

194        drag:true, 

195        breakpoints: { 

196            1280: { 

197                perPage: 3, 

198                drag:true, 

199            }, 

200            992: { 

201                perPage: 2, 

202                drag:true, 

203            }, 

204            768: { 

205                perPage: 2, 

206                drag:true, 

207            }, 

208            576: { 

209                perPage: 1, 

210                drag:true, 

211            }, 

212            0: { 

213                perPage: 1, 

214                drag:true, 

215            }, 

216        }, 

217    }).mount(); 

218     

219</script> 

220 

221<#else> 

222    <div class="alert alert-info text-center"> 

223		<@liferay_ui["message"] key="there-are-no-results" /> 

224	</div> 

225</#if>