carousel component implement

src/app/carousel-pause/carousel-pause.component.html

@@ -0,0 +1,42 @@
+<ngb-carousel
+    #carousel
+    [interval]="1000"
+    [pauseOnHover]="pauseOnHover"
+    [pauseOnFocus]="pauseOnFocus"
+    (slide)="onSlide($event)"
+>
+    @for (img of images;track img;let i = $index) {
+        <ng-template ngbSlide>
+            <div class="carousel-caption">
+                <h3>My slide {{ i + 1 }} title</h3>
+            </div>
+            <a href="https://www.google.fr/?q=Number+{{ i + 1 }}" target="_blank" rel="nofollow noopener noreferrer">
+                <div class="picsum-img-wrapper">
+                    <img [src]="img" alt="My image {{ i + 1 }} description"/>
+                </div>
+            </a>
+        </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="pauseOnFocus" [(ngModel)]="pauseOnFocus"/>-->
+<!--    <label class="form-check-label" for="pauseOnFocus">Pause on focus</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>-->

src/app/carousel-pause/carousel-pause.component.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app/carousel-pause/carousel-pause.component.ts

@@ -0,0 +1,44 @@
+import {Component, ViewChild} from '@angular/core';
+import {NgbCarousel, NgbCarouselModule, NgbSlideEvent, NgbSlideEventSource} from '@ng-bootstrap/ng-bootstrap';
+import {FormsModule} from '@angular/forms';
+import {NgOptimizedImage} from "@angular/common";
+
+@Component({
+    selector: 'ngbd-carousel-pause',
+    standalone: true,
+    imports: [NgbCarouselModule, FormsModule, NgOptimizedImage],
+    templateUrl: './carousel-pause.component.html',
+})
+export class NgbdCarouselPause {
+    images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/1920/1080`);
+
+    paused = false;
+    unpauseOnArrow = false;
+    pauseOnIndicator = false;
+    pauseOnHover = true;
+    pauseOnFocus = true;
+
+    @ViewChild('carousel', {static: true}) carousel: NgbCarousel = {} as NgbCarousel;
+
+    togglePaused() {
+        if (this.paused) {
+            this.carousel.cycle();
+        } else {
+            this.carousel.pause();
+        }
+        this.paused = !this.paused;
+    }
+
+    onSlide(slideEvent: NgbSlideEvent) {
+        if (
+            this.unpauseOnArrow &&
+            slideEvent.paused &&
+            (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)
+        ) {
+            this.togglePaused();
+        }
+        if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
+            this.togglePaused();
+        }
+    }
+}