<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-outer' set-container-dimensions-carousel="">
				<div id="carousel-hero" class='carousel-hero-holderSearch' ng-style="styleRail()">
					<div class='carousel-hero-railSearch' ng-style="styleRail()">
						<div class='carousel-hero-itemSearch slide-animation-carousel carousel-cover'
                             direction="{{direction}}"
                             currentIndex="{{currentIndex}}"
							 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 ng-style="style()" ng-if="!slide.image" class="carousel-hero no-image-slide"></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; display:block;">
					<ul 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>