admin管理员组

文章数量:1024581

I have an issue: I am developing a web app in angular V18 my problem is when I implement a carousel this just have text and it must change every 3 seconds, but in the code when I want to see the page, it loads infinitely and doesn't show any text, image or anything... why? I would appreciate the suggest, I show the code below of the component carousel thank you.

carouselponent.ts

export class PievistaprincipalComponent {
   items = ['CONOCE COMO DARLE COMPETITIVIDAD A TU NEGOCIO.','ORGANIZA TUS IDEAS.','AUTOMATIZA TUS PROCESOS.','GENERA Y GESTIONA TU CADENA DE VALOR.'];
   private intervaloContador: any;

   animate = false;
   itemSeleccionado = "";
   public contador: number = 4; // Inicializamos el contador en 4 segundos
   constructor(){
     
   }
   ngOnInit() {
     this.itemSeleccionado = this.items[0];
     this.change(); //invoke from start web app here loads infintely and dont show nothing 
                    // more 
   }
   ngAfterViewOnInit(){

   }

   ngOnDestroy() {

   }



   change(){
     this.intervaloContador = setInterval(() => {
       this.contador--; // reduce the count by 1
       if (this.contador === 0) {
          this.contador = 4; // reloads count of slides 0
       }
       this.currentSlide(this.contador) //put a slide
     }, 3000); // every 3 seconds refresh
   }

   currentSlide(indice: any) {
     // console.log(indice);
     this.itemSeleccionado = this.items[indice];
     this.triggerAnimation();
   }

   triggerAnimation() {
     this.animate = false; // reloads state
     setTimeout(() => {
       this.animate = true; // activate the animation, this tipe of timer runs ok
     }, 10); // wait a bit to reload the class of element
   }

   resetAnimation() {
     this.animate = false; // clean the class after the animation
   }

}

carouselponent.html

<div class="carousel-container">
    <link
      rel="stylesheet"
      href=".css/4.1.1/animate.min.css"
    />    
    <div class="slider-container">
        <div class="slider">
            <h1 
                [ngClass]="{'animate__animated animate__backInRight': animate}" 
                (animationend)="resetAnimation()">
                {{itemSeleccionado}}
            </h1>
        </div>
        <div class="dot-container">
            <button class="btn" 
              *ngFor="let item of items; let ind=index" 
              (click)="currentSlide(ind)">
                <span class="dot"></span>
            </button>
        </div>
    </div>
</div>

I have an issue: I am developing a web app in angular V18 my problem is when I implement a carousel this just have text and it must change every 3 seconds, but in the code when I want to see the page, it loads infinitely and doesn't show any text, image or anything... why? I would appreciate the suggest, I show the code below of the component carousel thank you.

carouselponent.ts

export class PievistaprincipalComponent {
   items = ['CONOCE COMO DARLE COMPETITIVIDAD A TU NEGOCIO.','ORGANIZA TUS IDEAS.','AUTOMATIZA TUS PROCESOS.','GENERA Y GESTIONA TU CADENA DE VALOR.'];
   private intervaloContador: any;

   animate = false;
   itemSeleccionado = "";
   public contador: number = 4; // Inicializamos el contador en 4 segundos
   constructor(){
     
   }
   ngOnInit() {
     this.itemSeleccionado = this.items[0];
     this.change(); //invoke from start web app here loads infintely and dont show nothing 
                    // more 
   }
   ngAfterViewOnInit(){

   }

   ngOnDestroy() {

   }



   change(){
     this.intervaloContador = setInterval(() => {
       this.contador--; // reduce the count by 1
       if (this.contador === 0) {
          this.contador = 4; // reloads count of slides 0
       }
       this.currentSlide(this.contador) //put a slide
     }, 3000); // every 3 seconds refresh
   }

   currentSlide(indice: any) {
     // console.log(indice);
     this.itemSeleccionado = this.items[indice];
     this.triggerAnimation();
   }

   triggerAnimation() {
     this.animate = false; // reloads state
     setTimeout(() => {
       this.animate = true; // activate the animation, this tipe of timer runs ok
     }, 10); // wait a bit to reload the class of element
   }

   resetAnimation() {
     this.animate = false; // clean the class after the animation
   }

}

carouselponent.html

<div class="carousel-container">
    <link
      rel="stylesheet"
      href=".css/4.1.1/animate.min.css"
    />    
    <div class="slider-container">
        <div class="slider">
            <h1 
                [ngClass]="{'animate__animated animate__backInRight': animate}" 
                (animationend)="resetAnimation()">
                {{itemSeleccionado}}
            </h1>
        </div>
        <div class="dot-container">
            <button class="btn" 
              *ngFor="let item of items; let ind=index" 
              (click)="currentSlide(ind)">
                <span class="dot"></span>
            </button>
        </div>
    </div>
</div>

本文标签： htmlCarousel with timer loads infinitely in Angular 18Stack Overflow

版权声明：本文标题：html - Carousel with timer loads infinitely in Angular 18 - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745599736a2158384.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。