Anchor-x/AngularDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

carousel component implement

Browse Source
This commit is contained in:
myh 2023-12-08 17:45:15 +08:00
parent 614961e475
commit 244e71e007
6 changed files with 89 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/carousel-pause/carousel-pause.component.html Normal file
View File

@ -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>-->

3
src/app/carousel-pause/carousel-pause.component.scss Normal file
View File

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

44
src/app/carousel-pause/carousel-pause.component.ts Normal file
View File

@ -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();
}
}
}

13
src/app/img-show/img-show.component.html
View File

@ -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>

68
src/app/img-show/img-show.component.scss
View File

@ -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;
}

13
src/app/img-show/img-show.component.ts
View File

@ -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 {
}