Карусель в Angular Issue

Вызов метода autoslide на крючке ngOnInit отсутствовал.

Я добавил еще один входной параметр для автозапуска, чтобы включить его!

Поскольку у вас включен SSR, вы можете использовать isPlatformBrowser, чтобы гарантировать, что код запускается только в браузере, поскольку на сервере нет document, window или setInterval.

  ngAfterViewInit(): void {
    console.info('Slideshow initialized with images:', this.images);
    if (this.isBrowser) {
      if (this.autoplay) {
        this.startAutoSlide();
      }
    }
  }

Полный код:

import { CommonModule, isPlatformBrowser } from '@angular/common';
import { Component, Inject, Input, PLATFORM_ID } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

interface SlideContent {
  imagesrc: string;
  imagealt: string;
}

@Component({
  selector: 'app-slideshow',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
  .fade {
    display: none;
  }
  .image-active {
    display: block;
  }
  `,
  ],
  template: `
  @defer {
    <div id = "carousel-container">
        <div *ngIf = "  images && images.length > 0" class = "carousel-container">
          <div *ngFor = "let image of images; let i = index">
            <img [src] = "image.imagesrc" [alt] = "image.imagealt"
                 [ngClass] = "{'image-active': selectedIndex === i}"
                 (click) = "selectImage(i)" class = "fade">
         
        </div>
          <div *ngIf = "indicators" class = "carousel-dot-container">
            <span class = "dot" *ngFor = "let dot of images; let i = index"
                  [ngClass] = "{'dot-active': selectedIndex === i}"
                  (click) = "selectImage(i)">
            </span>
          </div>
          <a class = "prev" (click) = "previousSlide()">&#10094;</a>
          <a class = "next" (click) = "nextSlide()">&#10095;</a>
          
        </div>
    
      </div>
  }
  `,
})
export class SlideShow {
  @Input() images: SlideContent[] = [];
  @Input() indicators = true;
  @Input() autoplay = true;

  selectedIndex = 0;
  intervalId: any;
  isBrowser = false;

  constructor(@Inject(PLATFORM_ID) private _platformId: Object) {
    this.isBrowser = isPlatformBrowser(this._platformId);
  }

  ngAfterViewInit(): void {
    console.info('Slideshow initialized with images:', this.images);
    if (this.isBrowser) {
      if (this.autoplay) {
        this.startAutoSlide();
      }
    }
  }

  //sets index of image on dot/indicator click
  selectImage(index: number): void {
    this.selectedIndex = index;
  }

  startAutoSlide() {
    this.intervalId = setInterval(() => {
      this.nextSlide();
    }, 3000); // Change slide every 3 seconds
  }

  nextSlide() {
    this.selectedIndex = (this.selectedIndex + 1) % this.images.length;
  }

  previousSlide() {
    this.selectedIndex =
      (this.selectedIndex - 1 + this.images.length) % this.images.length;
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SlideShow],
  template: `
    <app-slideshow [images] = "images" [indicators] = "true"></app-slideshow>
  `,
})
export class App {
  images = [
    {
      imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+1',
      imagealt: 'example',
    },
    {
      imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+2',
      imagealt: 'example',
    },
    {
      imagesrc: 'https://placehold.co/600x400/000000/FFFFFF/png?text=Slide+3',
      imagealt: 'example',
    },
  ];
}

bootstrapApplication(App);

Демо-версия Stackblitz