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 class="pagination">
<div class="dot" *ngFor="let dot of carouselApps(); let i = index" [class.active]="i === currentSlide"></div>
</div>

<!-- Navigation buttons -->
<!-- <div class="indicator-button">
<button class="indicator" (click)="previousSlide()" (click)="nextSlide()"
*ngFor="let indicator of slideIndicators()" [class.active]="indicator.isActive"
(click)="goToSlide(indicator.index)"></button>
</div> -->
<!-- <button class="nav next" (click)="nextSlide()" *ngFor="let indicator of slideIndicators()"
[class.active]="indicator.isActive"
(click)="goToSlide(indicator.index)">o</button> -->
</div>
</div>

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 } 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 {
private currentSlideIndex = signal(0);
private autoPlayInterval: any;

carouselApps = signal<AppInfo[]>([]);
cardsPerSlide = 4;
currentSlide = 0;

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 / this.cardsPerSlide);
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);
}

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.set(null);
}
}

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

.carousel-section {
margin-bottom: 3rem;

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

.carousel-container {
position: relative;
overflow: hidden;
margin: 0 5vh;
overflow-x: hidden;
overflow-y: auto;

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

.card {
flex: 0 0 25%;
margin: 0 10px;
overflow: hidden;
border-radius: 8px;
text-align: center;
padding: 1rem;

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

a {
display: inline-block;
margin-top: 10px;
color: #000045;
font-weight: bold;
}
}
}
}
}






// .carousel-container {
// max-width: 1440px;
// height: calc(100vh - 140px);
// margin: 0 10vh;
// overflow-x: hidden;
// overflow-y: auto;

// .carousel-wrapper {
// margin-bottom: 20vh;

// // overflow: hidden;
// .carousel {
// display: flex;
// transition: transform 3s ease-in-out;
// // width: calc(100% * totalSlides);
// gap: 20px;
// }

// // .carousel-track{
// // display: flex;
// // transition: transform 0.5s ease-in-out;
// // width: calc(100% * totalSlides); /* Optional */
// // }

// .card {
// margin-top: 1%;
// overflow: hidden;
// position: sticky;
// flex: 0 0 25%;
// /* 4 cards per view */
// box-sizing: border-box;
// border: 2px solid rgb(238, 235, 235);
// padding: 0 0px;
// border-radius: 5px;
// background-color: whitesmoke;
// }

// .card a {
// display: flex;
// margin-top: 5px;
// padding: 6px 12px;
// color: #2f78c4;
// text-decoration: none;
// border-radius: 4px;
// background-color: whitesmoke;
// font-weight: 800;
// justify-self: right;
// }

// .card .image-alignment {
// height: 100px;
// width: 100%;
// align-self: center;
// }

// .card .background-align {
// background-color: whitesmoke;
// color: rgb(0, 0, 97);
// }

// .card img {
// width: 0;
// height: 80px;
// object-fit: cover;
// border-radius: 8px;
// background-color: whitesmoke;

// }

// .card h3,
// .card p {
// margin: 10px;
// background-color: whitesmoke;
// }

// .carousel-track {
// display: flex;
// flex-direction: row;
// transition: transform 0.5s ease-in-out;
// }

// }
// }