كيف ننشئ Carousel في Angular
الطريقة اليدوية:
https://github.com/Angular-istic/Project-helper/blob/main/carousel.md
https://www.youtube.com/watch?v=1pN09qm5g4w
//-----------------------------------------------------------------------------------------------------------------
النتيجة النهائية:
اليوم سنتعلم كيف نقوم بإنشاء Carsoul في مشروعنا الذي يعمل بإطار عمل Angular وكيف نستخدمه في أي مكان داخل المشروع وبكل أريحية:
الخطوة الأولى: سنتأكد من إضافة حزم Boostrap إلى مشروعنا:
محتوى ملف الـ HTML
<div class="row">
<div class="col-md-10 mx-auto">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li *ngFor="let page of arrPages; let i = index" data-target="#myCarousel" (data-slide-to)="i"
[class]="i == 0 ? 'active' : ''"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div *ngFor="let _page of arrPages; let a=index"
[class]="a === 0? 'carousel-item active':'carousel-item'">
<div class="row">
<div class="col-sm-4" *ngFor="let item of items; let i=index">
<div class="thumb-wrapper" *ngIf="i>= start && i < end">
<div class="img-box">
<img [src]="item.IMG" class="img-fluid" [alt]="item.NAME_AR">
</div>
<div class="thumb-content">
<h4>{{item.NAME_AR}}</h4>
<p>{{item.TEACHER_AR}}</p>
<button mat-raised-button color="primary" (click)="openDialog(item)">استعراض
المحتوى</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev"
[style]="start === 0? 'display:none;':'display:block;'" (click)="onPrev()">
<i class="fa fa-angle-left"></i>
</a>
<a [style]="end === (this.pages * 3)? 'display:none;':'display:block;'" class="carousel-control-next"
href="#myCarousel" data-slide="next" (click)="onNext()">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
محتوى ملف الـ ts:
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from '../dialog-content/dialog-content.component';
@Component({
selector: 'app-bootstrap-carsousel',
templateUrl: './bootstrap-carsousel.component.html',
styleUrls: ['./bootstrap-carsousel.component.scss']
})
export class BootstrapCarsouselComponent implements OnInit {
@Input('items') items: any = [];
pages: number = 0;
arrPages: any = [];
start: number = 0;
end: number = 3;
constructor(public dialog: MatDialog) { }
openDialog(item: any) {
const dialogRef = this.dialog.open(DialogContentComponent, {
data: { item: item },
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
ngOnInit(): void {
this.pages = Math.ceil((this.items.length / 3));
console.log(this.pages);
this.arrPages = Array(this.pages).fill(0).map((_, i) => i * 1);
console.log(this.arrPages);
}
onNext(): void {
console.log(this.pages * 3)
if (this.end !== (this.pages * 3)) {
this.start = this.start + 3; this.end = this.end + 3;
}
}
onPrev(): void {
if (this.start !== 0) {
this.start = this.start - 3; this.end = this.end - 3;
}
}
}
محتوى ملف الـ css:
// add .carousel-indicators if you want flip dots
//هذا الكود أدناه لجعل الكارسول من اليمين إلى اليسار
.carousel-control-prev, .carousel-control-next {
transform: scaleX(-1)
}
.carousel-control-next {
left: 0;
right: unset;
}
.carousel-control-prev {
right: 0;
left: unset;
}
//--------------------------------------
h2 {
color: #333;
text-align: center;
text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-weight: bold;
position: relative;
margin: 30px 0 60px;
}
h2::after {
content: "";
width: 100px;
position: absolute;
margin: 0 auto;
height: 3px;
background: #8fbc54;
left: 0;
right: 0;
bottom: -10px;
}
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
padding: 0 70px;
}
.carousel .carousel-item {
color: #999;
font-size: 14px;
text-align: center;
overflow: hidden;
min-height: 290px;
}
.carousel .carousel-item .img-box {
width: 135px;
height: 135px;
margin: 0 auto;
padding: 5px;
border: 1px solid #ddd;
border-radius: 50%;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 30px 0 10px;
}
.carousel .overview {
font-style: italic;
}
.carousel .overview b {
text-transform: uppercase;
color: #7AA641;
}
.carousel-control-prev, .carousel-control-next {
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control-prev i, .carousel-control-next i {
font-size: 68px;
line-height: 42px;
position: absolute;
display: inline-block;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
}
.carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 12px;
height: 12px;
margin: 1px 3px;
border-radius: 50%;
border: none;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
.carousel-indicators li.active {
background: #555;
box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
}
app-cours-carsousel{
align-items: center !important;
position: fixed !important;
right: 0;
}
app-swiper{
position: sticky !important;
}
الخطوة الثالثة: استدعاء المكوّن
<app-bootstrap-carsousel [items]="courses.FIRST_TIRM.COURSES"></app-bootstrap-carsousel>
وبهذا نكون انتهينا
تعليقات
إرسال تعليق