carousel.component.html

<div class="row">
	<div class="col-md-6">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Carousel</h4>
				<h6 class="card-subtitle">This is basic Carousel</h6>
				<ngb-carousel>
					<ng-template ngbSlide>
						<img src="assets/images/big/img1.jpg" alt="Random first slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">First slide label</h4>
							<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img2.jpg" alt="Random second slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">Second slide label</h4>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img3.jpg" alt="Random third slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">Third slide label</h4>
							<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
						</div>
					</ng-template>
				</ngb-carousel>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Navigation arrows and indicators</h4>
				<h6 class="card-subtitle">Navigation</h6>
				<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
					<ng-template ngbSlide>
						<img src="assets/images/big/img4.jpg" alt="Random first slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">10 seconds between slides...</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img5.jpg" alt="Random second slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">No keyboard...</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img6.jpg" alt="Random third slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">And no wrap after last slide.</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
				</ngb-carousel>

				<div class="btn-group m-t-40" role="group" aria-label="Carousel toggle controls">
  					<button type="button" (click)="showNavigationArrows = !showNavigationArrows" class="btn btn-outline-dark btn-sm">Toggle navigation arrows</button>
  					<button type="button" (click)="showNavigationIndicators = !showNavigationIndicators" class="btn btn-outline-dark btn-sm">Toggle navigation indicators</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">Pause/cycle <span class="badge badge-success text-white ml-2">New</span></h4>
				<ngb-carousel #carousel interval="1000" [pauseOnHover]="pauseOnHover" (slide)="onSlide($event)">
			    		<ng-template ngbSlide>
						<img src="assets/images/big/img4.jpg" alt="Random first slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">10 seconds between slides...</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img5.jpg" alt="Random second slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">No keyboard...</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
					<ng-template ngbSlide>
						<img src="assets/images/big/img6.jpg" alt="Random third slide">
						<div class="carousel-caption">
							<h4 class="text-white font-bold">And no wrap after last slide.</h4>
							<p>This carousel uses customized default values.</p>
						</div>
					</ng-template>
				</ngb-carousel>
				<hr>
				<div class="form-check">
				  <input type="checkbox" class="form-check-input" id="pauseOnHover" [(ngModel)]="pauseOnHover">
				  <label class="form-check-label" for="pauseOnHover">Pause on hover</label>
				</div>
				<div class="form-check">
				  <input type="checkbox" class="form-check-input" id="unpauseOnArrow" [(ngModel)]="unpauseOnArrow">
				  <label class="form-check-label" for="unpauseOnArrow">Unpause when clicking on arrows</label>
				</div>
				<div class="form-check">
				  <input type="checkbox" class="form-check-input" id="pauseOnIndicator" [(ngModel)]="pauseOnIndicator">
				  <label class="form-check-label" for="pauseOnIndicator">Pause when clicking on navigation indicator</label>
				</div>
				<button type="button" (click)="togglePaused()" class="btn btn-outline-dark btn-sm">
				  {{paused ? 'Cycle' : 'Pause' }}
				</button>
			</div>
		</div>
	</div>
</div>