<div class="banner-container" (swipeleft)="slideTo(currentIndex + 1)" (swiperight)="slideTo(currentIndex - 1)"
    *ngIf="bannerData.widgetData?.length > 1">

    <div class="banner WidgetInstanceId" *ngFor="let slide of bannerData.widgetData; let i = index" [hidden]="i !== currentIndex">
        <p>{{slide.banners | json}}</p>
        <img i18n-alt alt="Page Banner" [src]="slide.banners" wsUtilsImageResponsive class="banner-image" />
    </div>
    <div class="banner-meta">
        <!-- <a [routerLink]=" !isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'"
            class="banner-title text-truncate" *ngIf="widgetData[currentIndex].title"
            [title]="widgetData[currentIndex].title">
            {{ widgetData[currentIndex].title }}
        </a> -->
        <div class="dots-container" *ngIf="bannerData.widgetData?.length > 1">
            <span class="dot" [ngClass]="{ active: j === currentIndex }" *ngFor="let slide of bannerData.widgetData; let j = index"
                (click)="slideTo(j)"></span>
        </div>
    </div>
    <a *ngIf="bannerData.widgetData?.length > 1" role="button" class="prev" (click)="slideTo(currentIndex - 1)">&#10094;</a>
    <a *ngIf="bannerData.widgetData?.length > 1" role="button" class="next" (click)="slideTo(currentIndex + 1)">&#10095;</a>
</div>
<div class="banner-container-solo" *ngIf="bannerData.widgetData?.length == 1">
    <img i18n-alt alt="Page Banner" [src]="bannerData.widgetData[0].banners.xl" wsUtilsImageResponsive class="banner-image-solo" />
</div>

./sliders.component.scss

$banner-min-height: 243px;

.banner-container {
	// max-height: 442px;
	min-height: $banner-min-height;
	overflow: hidden;
	position: relative;
	margin: auto;
	border-radius: 12px;
}

.banner-overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to left,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0) 15%,
		rgba(0, 0, 0, 0) 85%,
		rgba(0, 0, 0, 0.25) 100%
	);
	// linear-gradient(
	//   to bottom,
	//   rgba(0, 0, 0, 0) 0%,
	//   rgba(0, 0, 0, 0.15) 75%,
	//   rgba(0, 0, 0, 0.5) 100%
	// );
}

.banner {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;

	.banner-image {
		width: 100%;
		min-height: $banner-min-height;
		display: block;
		height: 350px;
		border-radius: 12px;
	}
}

.banner-meta {
	text-align: center;
	z-index: 2;
	// padding: $size-xs $size-s;
	position: absolute;
	bottom: 0;
	left: 50%;
	border-radius: 12px;
	transform: translateX(-50%);
	box-sizing: border-box;

	.banner-title {
		color: #f2f2f2;
		// margin-bottom: $size-xs;
		font-size: 1.1rem;

		// @include breakpoint-xs {
		// 	display: none;
		// }
	}

	.dots-container {
		// padding: $size-xs;
		display: flex;
		align-items: center;
		justify-content: center;

		.dot {
			cursor: pointer;
			// height: $size-m;
			// width: $size-m;
			margin: 0 6px;
			background-color: rgba(120, 120, 120, 0.75);
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.5s ease !important;

			// @include breakpoint-xs {
			// 	height: $size-xs;
			// 	width: $size-xs;
			// 	margin: 0 4px;
			// }
		}

		.dot.active {
			background-color: #d3d3d3;
			// height: $size-m + ($size-xs / 4);
			// width: $size-m + ($size-xs / 4);

			// @include breakpoint-xs {
			// 	height: $size-xs + ($size-xs / 4);
			// 	width: $size-xs + ($size-xs / 4);
			// }
		}
	}
}

@-webkit-keyframes fade {
	from {
		opacity: 0.25;
	}

	to {
		opacity: 1;
	}
}

@keyframes fade {
	from {
		opacity: 0.25;
	}

	to {
		opacity: 1;
	}
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	// padding: $size-m;
	color: white;
	font-weight: bold;
	// font-size: $size-l;
	z-index: 2;
	border-radius: 0 3px 3px 0;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.banner-container-solo {
	overflow: hidden;
	margin: auto;
	border-radius: 12px;
}

.banner-image-solo {
	width: 100%;
	display: block;
	border-radius: 12px;
}