diff --git a/src/app/carousel-pause/carousel-pause.component.html b/src/app/carousel-pause/carousel-pause.component.html
new file mode 100644
index 0000000..a274105
--- /dev/null
+++ b/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>-->
\ No newline at end of file
diff --git a/src/app/carousel-pause/carousel-pause.component.scss b/src/app/carousel-pause/carousel-pause.component.scss
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/src/app/carousel-pause/carousel-pause.component.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/app/carousel-pause/carousel-pause.component.ts b/src/app/carousel-pause/carousel-pause.component.ts
new file mode 100644
index 0000000..c474743
--- /dev/null
+++ b/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();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/img-show/img-show.component.html b/src/app/img-show/img-show.component.html
deleted file mode 100644
index b83683a..0000000
--- a/src/app/img-show/img-show.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!--图片轮播实现-->
-
-<!-- 轮播图容器 -->
-<div id="carousel">
-    <img src="assets/img/anyuse0.png" alt="anyuse6">
-    <img src="/assets/img/anyuse7.png" alt="anyuse7">
-    <img src="/assets/img/anyuse9.png" alt="anyuse9">
-    <img src="/assets/img/anyuse8.png" alt="anyuse8">
-    <!-- 按钮组 -->
-    <div id="leftArrow" class="iconfont icon-arrow-lift"></div> <!-- 左箭头切换按钮 -->
-    <div id="rightArrow" class="iconfont icon-arrow-right"></div> <!-- 右箭头切换按钮 -->
-    <div id="sliderBtn"></div> <!-- 切换按钮组 -->
-</div>
\ No newline at end of file
diff --git a/src/app/img-show/img-show.component.scss b/src/app/img-show/img-show.component.scss
deleted file mode 100644
index b5eaa01..0000000
--- a/src/app/img-show/img-show.component.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-#carousel {
-	@apply w-auto h-auto relative overflow-hidden justify-center rounded-2xl flex mx-2 mt-2;
-}
-
-#carousel img {
-	position: absolute; /* 绝对定位 使图片堆叠 */
-	width: auto; /* 设定大小 按比例缩放 */
-	height: auto; /* 设定大小 按比例缩放 */
-	transition: all .6s; /* 动画 */
-	opacity: 0; /* 隐藏 */
-}
-
-.imgActive {
-	opacity: 1 !important; /* 显示图片 最高优先级 */
-}
-
-/* 控制按钮的样式 */
-#leftArrow,
-#rightArrow {
-	//position: absolute;
-	//left: 5px;
-	//top: 50%;
-	//width: 25px;
-	//height: 30px;
-	//background-color: #eee;
-	//display: flex;
-	//justify-content: center;
-	//align-items: center;
-	//opacity: 0.7;
-	//font-size: 20px;
-	//cursor: pointer;
-	//z-index: 1000;
-	@apply absolute left-5 top-1/2 w-7 h-11 bg-gray-300 flex justify-center items-center opacity-70 text-2xl cursor-pointer z-10;
-}
-
-#rightArrow {
-	//left: auto;
-	//right: 5px;
-	@apply left-auto right-5;
-}
-
-#sliderBtn {
-	//position: absolute;
-	//width: 100%;
-	//bottom: 0;
-	//display: flex;
-	//justify-content: flex-end;
-	//z-index: 1000;
-	@apply absolute w-full bottom-0 flex justify-end z-10;
-}
-
-.unitBtn {
-	//width: 10px;
-	//height: 10px;
-	//background-color: #eee;
-	//border-radius: 10px;
-	//margin: 10px;
-	//cursor: pointer;
-	@apply w-4 h-4 bg-gray-300 rounded-full m-2 cursor-pointer;
-}
-
-.btnActive {
-	background-color: #4C98F7;
-}
\ No newline at end of file
diff --git a/src/app/img-show/img-show.component.ts b/src/app/img-show/img-show.component.ts
deleted file mode 100644
index ee4a46d..0000000
--- a/src/app/img-show/img-show.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from "@angular/core";
-import {RouterLink} from "@angular/router";
-
-@Component({
-    standalone: true,
-    selector: 'app-img-show',
-    templateUrl: './img-show.component.html',
-    styleUrls: ['./img-show.component.scss'],
-    imports: [RouterLink],
-})
-
-export class ImgShowComponent {
-}
\ No newline at end of file