<style>
	#wizdomDishImageSlider {
		position: relative;
		height: 420px;
		overflow: hidden;
	}

	.dishImage {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
	}

	.dishHeading, .dishDescription {
		width: 100%;
		text-align: center;
	}

	.dishHeading {
		padding-top: 40px;
	}

	.dishDescription {
		padding-top: 25px;
	}

	.dishHeading span {
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
		color: #282c2e;
	}

	.dishDescription span {
		font-size: 14px;
		color: #282c2e;
		opacity: 0.6;
	}

	.dish-controls-newdesign ul {
		position: absolute;
		text-align: center;
		bottom: 0;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0 0 0 0;
		margin-bottom: 40px;
	}


	.dish-controls-newdesign li.currentitem {
		cursor: default;
		position: relative;
	}


	.dish-controls-newdesign li {
		margin: 2px;
		display: inline-block;
		cursor: pointer;
	}
</style>
<div class="webpart-edit-button-container" ng-if="editMode">
    <button class="editWebpartButton btn" ng-click="editWebpart()" type="button" title='{{"Edit Webpart" | translate}}'>
        <span class="ms-Icon ms-Icon--Edit"></span><span class="editWebpartButtonText">{{"Edit" | translate}}</span>
    </button>
</div>

<div style="width:100%;">
	<div id="wizdomDishImageSlider" ng-if="configured && !loading && images" ng-mouseleave="startAnimation()" ng-mouseover="stopAnimation()" class="wizdom-fullview-left wizdom-fullview-right">
		<div class="dishImage slide-animation-imageslider"
             direction="{{direction}}"
			 ng-repeat="item in images"
			 ng-swipe-left="nextSlide(true)"
			 ng-swipe-right="prevSlide(true)"
			 ng-hide="!isCurrentSlideIndex($index)">

			<div ng-style="styleBackground((item.url))" />

			<div class="dishHeading">
				<span ng-bind="item.title"></span>
			</div>
			<div class="dishDescription">
				<span ng-bind="item.description"></span>
			</div>



		</div>

		<div class="dish-controls-newdesign">
			<ul>
				<li class="icon-dot-dark-dims" ng-class="{'icon-dot-dark':isCurrentSlideIndex($index), 'icon-dot-dark-transparent':!isCurrentSlideIndex($index)}" ng-repeat="item in images" ng-click="setCurrentSlideIndex($index);">
				</li>
			</ul>
		</div>


	</div>
</div>

<div wizdom365-spinner="" loading="loading"></div>
