Notes

<div class="carousel-section">
<div class="gradient-bar">
<div class="carousel-container">
<div class="carousel-track" [style.transform]="transFormStyle()">
@for(app of currentSlideCards(); track app.unique_id) {
<div class="card">
<img class="image-alignment" [src]="app.app_carousal_image_url" alt="{{ app.app_name }}" />
<p>{{ app.short_description }}</p>
<a [routerLink]="app.app_url">Go to application</a>
</div>
}
</div>
</div>
</div>
<div class="pagination">
<div class="dot" *ngFor="let dot of slideDots; let i = index" [class.active]="i === currentSlide" (click)="goToSlide(i)"></div>
</div>
</div>

.carousel-section {
position: relative;
margin-bottom: 14rem;

.gradient-bar {
width: 100%;
height: 100px;
background: linear-gradient(89deg, #1b3a91 11.51%, #12d8d5 65.48%, #12d8d5 85.52%, #12d8c8 98.91%);
}

.carousel-container {
position: relative;
top: 25px;
overflow: hidden;
margin: 0 5vh;

.carousel-track {
display: flex;
transition: transform 0.8s ease-in-out;
}

.card {
flex: 0 0 23%;
margin: 0 10px;
background-color: #f2f2f2;
border-radius: 8px;
padding-bottom: 1rem;
box-sizing: border-box;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;

img {
width: 100%;
height: 150px;
object-fit: cover;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

p {
font-size: 0.9rem;
color: #000045;
margin: 0.5rem 0;
}

a {
display: flex;
justify-content: flex-end;
padding-right: 0.75rem;
margin-top: 1rem;
color: #6666f5;
font-weight: 600;
text-decoration: none;
}
}
}

.pagination {
position: absolute;
top: 300px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
transition: background-color 1s ease, transform 0.6s ease;
cursor: pointer;

&.active {
background-color: rgba(255, 255, 255, 0.9);
transform: scale(1.3);
}
}
}
}
import { CommonModule } from '@angular/common';
import { Component, signal, computed, OnDestroy, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AdminService, AppInfo } from '../../services/admin/admin.service';
import { Subscription, interval } from 'rxjs';

// import { FormsModule } from '@angular/forms';
// import { MatIconModule } from '@angular/material/icon';
// import { BrowserModule } from '@angular/platform-browser';
// import { MatButtonModule } from '@angular/material/button';
// import { MatCardModule } from '@angular/material/card';
// import { MatInputModule } from '@angular/material/input';
// import { ɵBrowserAnimationBuilder } from '@angular/animations';

@Component({
selector: 'app-carousel',
imports: [CommonModule, RouterLink],
templateUrl: './carousel.component.html',
styleUrl: './carousel.component.scss'
})
export class CarouselComponent implements OnInit, OnDestroy {

//signals
private currentSlideIndex = signal(0);
carouselApps = signal<AppInfo[]>([]);

cardsPerSlide = 4;
autoPlayInterval: any;


totalSlides = computed(() =>
Math.ceil(this.carouselApps().length / this.cardsPerSlide)
);

currentSlideCards = computed(() => {
const start = this.currentSlideIndex() * this.cardsPerSlide;
return this.carouselApps().slice(start, start + this.cardsPerSlide);
});

transFormStyle = computed(() => {
const translateX = -this.currentSlideIndex() * 100;
return `translateX(${translateX}%)`;
});

constructor(private adminService: AdminService) { }

ngOnInit(): void {
this.adminService.getApps().subscribe((apps: AppInfo[]) => {
this.carouselApps.set(
apps.filter(app => !app.is_carousal_hidden)
);
});
// this.startAutoPlay();
}

nextSlide(): void {
const next = (this.currentSlideIndex() + 1) % this.totalSlides();
this.currentSlideIndex.set(next);
}

goToSlide(index: number): void {
this.currentSlideIndex.set(index);
}

// previousSlide(): void {
// const prev = this.currentSlideIndex() === 0
// ? this.totalSlides() - 1
// : this.currentSlideIndex() - 1;
// this.currentSlideIndex.set(prev);
// }

startAutoPlay(): void {
this.autoPlayInterval = setInterval(() => {
this.nextSlide();
}, 5000);
}

stopAutoPlay(): void {
if (this.autoPlayInterval) {
clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null;
}
}

ngOnDestroy(): void {
this.stopAutoPlay();
}

get currentSlide() {
return this.currentSlideIndex();
}

get slideDots(): number[] {
return Array.from({ length: this.totalSlides() }, (_, i) => i);
}
}