1<style type="text/css">header .item { 

2  height: 50vh; 

3  position: relative; 

4} 

5header .item img { 

6  width: 100%; 

7  height: 100%; 

8  object-fit: cover; 

9} 

10header .item .cover { 

11  padding: 75px 0; 

12  position: absolute; 

13  width: 100%; 

14  height: 100%; 

15  top: 0; 

16  left: 0; 

17  background: rgba(0, 0, 0, 0.6); 

18  display: flex; 

19  align-items: center; 

20} 

21header .item .cover .header-content { 

22  position: relative; 

23  padding: 56px; 

24  overflow: hidden; 

25} 

26header .item .cover .header-content .line { 

27  content: ""; 

28  display: inline-block; 

29  width: 100%; 

30  height: 100%; 

31  left: 0; 

32  top: 0; 

33  position: absolute; 

34  border: 9px solid #fff; 

35  -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); 

36  clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); 

37} 

38header .item .cover .header-content h2 { 

39  font-weight: 300; 

40  font-size: 25px; 

41  color: #fff; 

42} 

43header .item .cover .header-content h1 { 

44  font-size: 46px; 

45  font-weight: 600; 

46  margin: 5px 0 20px; 

47  word-spacing: 3px; 

48  color: #fff; 

49} 

50header .item .cover .header-content h4 { 

51  font-size: 14px; 

52  font-weight: 300; 

53  line-height: 36px; 

54  color: #fff; 

55} 

56header .owl-item.active h1 { 

57  -webkit-animation-duration: 1s; 

58  animation-duration: 1s; 

59  -webkit-animation-fill-mode: both; 

60  animation-fill-mode: both; 

61  animation-name: fadeInDown; 

62  animation-delay: 0.3s; 

63} 

64header .owl-item.active h2 { 

65  -webkit-animation-duration: 1s; 

66  animation-duration: 1s; 

67  -webkit-animation-fill-mode: both; 

68  animation-fill-mode: both; 

69  animation-name: fadeInDown; 

70  animation-delay: 0.3s; 

71} 

72header .owl-item.active h4 { 

73  -webkit-animation-duration: 1s; 

74  animation-duration: 1s; 

75  -webkit-animation-fill-mode: both; 

76  animation-fill-mode: both; 

77  animation-name: fadeInUp; 

78  animation-delay: 0.3s; 

79} 

80header .owl-item.active .line { 

81  -webkit-animation-duration: 1s; 

82  animation-duration: 1s; 

83  -webkit-animation-fill-mode: both; 

84  animation-fill-mode: both; 

85  animation-name: fadeInLeft; 

86  animation-delay: 0.3s; 

87} 

88header .owl-nav .owl-prev { 

89  position: absolute; 

90  left: 15px; 

91  top: 43%; 

92  opacity: 0; 

93  -webkit-transition: all 0.4s ease-out; 

94  transition: all 0.4s ease-out; 

95  background: rgba(0, 0, 0, 0.5) !important; 

96  width: 40px; 

97  cursor: pointer; 

98  height: 40px; 

99  position: absolute; 

100  display: block; 

101  z-index: 1000; 

102  border-radius: 0; 

103} 

104header .owl-nav .owl-prev span { 

105  font-size: 1.6875rem; 

106  color: #fff; 

107} 

108header .owl-nav .owl-prev:focus { 

109  outline: 0; 

110} 

111header .owl-nav .owl-prev:hover { 

112  background: #000 !important; 

113} 

114header .owl-nav .owl-next { 

115  position: absolute; 

116  right: 15px; 

117  top: 43%; 

118  opacity: 0; 

119  -webkit-transition: all 0.4s ease-out; 

120  transition: all 0.4s ease-out; 

121  background: rgba(0, 0, 0, 0.5) !important; 

122  width: 40px; 

123  cursor: pointer; 

124  height: 40px; 

125  position: absolute; 

126  display: block; 

127  z-index: 1000; 

128  border-radius: 0; 

129} 

130header .owl-nav .owl-next span { 

131  font-size: 1.6875rem; 

132  color: #fff; 

133} 

134header .owl-nav .owl-next:focus { 

135  outline: 0; 

136} 

137header .owl-nav .owl-next:hover { 

138  background: #000 !important; 

139} 

140header:hover .owl-prev { 

141  left: 0px; 

142  opacity: 1; 

143} 

144header:hover .owl-next { 

145  right: 0px; 

146  opacity: 1; 

147} 

148</style> 

149<!-- 

150  Bootstrap docs: https://getbootstrap.com/docs 

151--> 

152<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" id="bootstrap-css" /><script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

153<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" /> 

154<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /> 

155<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" /><script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> 

156 

157<header> 

158<div class="owl-carousel owl-theme"> 

159<#if Image.getSiblings()?has_content> <#list Image.getSiblings() as cur_Image> <#if cur_Image.getData()?? && cur_Image.getData() != ""> 

160<div class="item"> 

161<img alt="${cur_Image.getAttribute("alt")}" data-fileentryid="${cur_Image.getAttribute("fileEntryId")}" src="${cur_Image.getData()}" />  

162</div> 

163</#if> </#list> </#if> 

164</div> 

165 

166</header> 

167 

168<script> 

169    $('.owl-carousel').owlCarousel({ 

170    loop:true, 

171    margin:10, 

172    dots:false, 

173    nav:true, 

174    mouseDrag:false, 

175    autoplay:true, 

176    animateOut: 'slideOutUp', 

177    responsive:{ 

178        0:{ 

179            items:1 

180        }, 

181        600:{ 

182            items:1 

183        }, 

184        1000:{ 

185            items:1 

186        } 

187    } 

188}); 

189 

190</script>