<div>
	<button ng-show="editMode" class="editWebpartButton btn btn-primary" ng-click="editWebpart()" type="button">
		<span class="glyphicon glyphicon-cog"></span><span class="editWebpartButtonText">{{"Settings" | translate}}</span>
	</button>
	<div ng-show="dataReady && slides.length > 0">
		<div style="position:relative">
			<div id='carousel-outer5' set-container-dimensions-carousel-five="">
				<div id="carousel-hero" class='carousel-hero-holderSearch' style="height:294px;" ng-style="style()">
					<div class='carousel-hero-railSearch' ng-style="style()">
						<div class='carousel-hero-itemSearch slide-animation-carousel5 carousel-cover'
                             direction="{{direction}}"
                             currentIndex="{{currentIndex}}"
                             slides="{{slides}}"
							 ng-repeat="slide in slides"
							 ng-hide="!isCurrentSlideIndex($index)"
							 ng-click="redirectTo(slide.path)"
							 ng-style="styleBackground((slide.image | stripImageSrc), 801)"
							 style="cursor:pointer;">

							<div class='carousel-hero no-image-slide' ng-style="style()" ng-if="!slide.image"></div>
							<div class='carousel-hero-text'>
								<div class='carousel-hero-text-inner'>
									<div class='carousel-hero-text-title'>
										<a href='{{slide.path}}' ng-bind="slide.title"></a>
									</div>
									<div class='carousel-hero-text-body'>
										<a href='{{slide.path}}' ng-if="!slide.summary">{{slide.content | htmlToPlainText}} </a>
										<a href='{{slide.path}}' ng-if="slide.summary">{{slide.summary | htmlToPlainText}}</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id='carousel-list' class='carousel-list-holder' style="height:294px;">
					<ul id="carousel-list-rail1" class='carousel-list-railSearch'>
						<li class='carousel-list-item' ng-repeat="slide in slides" style="height:147px;">
							<a href='{{slide.path}}' ng-if="slide.image"> <img ng-src="{{slide.image | stripImageSrc}}?width=201" /> </a>
							<div class='carousel-item-text'>
								<div class='carousel-item-text-inner'>
									<div class='carousel-item-text-title'>
										<a href='{{slide.path}}' ng-bind="slide.title"></a>
									</div>
								</div>
							</div>
						</li>
						<li class='carousel-list-item' ng-repeat="slide in slides" style="height:147px;">
							<a href='{{slide.path}}' ng-if="slide.image"> <img ng-src="{{slide.image  | stripImageSrc}}?width=201" /> </a>
							<div class='carousel-item-text'>
								<div class='carousel-item-text-inner'>
									<div class='carousel-item-text-title'>
										<a href='{{slide.path}}' ng-bind="slide.title"></a>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<ul id="carousel-list-rail2" class='carousel-list-railSearch'>
						<li class='carousel-list-item' ng-repeat="slide in slides" style="height:147px;">
							<a href='{{slide.path}}' ng-if="slide.image"> <img ng-src="{{slide.image | stripImageSrc}}?width=201" /> </a>
							<div class='carousel-item-text'>
								<div class='carousel-item-text-inner'>
									<div class='carousel-item-text-title'>
										<a href='{{slide.path}}' ng-bind="slide.title"></a>
									</div>
								</div>
							</div>
						</li>
						<li class='carousel-list-item' ng-repeat="slide in slides" style="height:147px;">
							<a href='{{slide.path}}' ng-if="slide.image"> <img ng-src="{{slide.image  | stripImageSrc}}?width=201" /> </a>
							<div class='carousel-item-text'>
								<div class='carousel-item-text-inner'>
									<div class='carousel-item-text-title'>
										<a href='{{slide.path}}' ng-bind="slide.title"></a>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div wizdom365-spinner="" loading="!dataReady"></div>
</div>