Angular - PROBLEMA SLIDER AUTOMÁTICO DE IMÁGENES CON NGFOR

 
Vista:
sin imagen de perfil

PROBLEMA SLIDER AUTOMÁTICO DE IMÁGENES CON NGFOR

Publicado por Miriam (4 intervenciones) el 14/11/2022 12:32:11
Hola.

Tengo este array de imágenes en my componente.ts:


1
images = ["https://content.xxx/50/front-page/background1.jpg", "https://content.xxx/50/front-page/background2.jpg", "https://content. xxx/50/front-page/background3.jpg"];

Y este div en mi componente.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="slider">
 
      <div class="slider-container" *ngFor="let item of images">
 
         <figure>
 
             <img [src]="images" class="img-responsive"/>
 
         </figure>
 
      </div>
 
</div>

Mi problema es que solo veo la primera imagen en el slider automático.

Antes de hacerlo con el ngfor tenía esto en el component.html y veía las tres imágenes en el slider automático pero al pasarlo a array solo veo la primera, pero no se que estoy haciendo mal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slider">
       <div class="slider-container">
           <figure>
               <img src="https://content.xxx/50/front-page/fondo1.jpg" class="img-responsive">
           </figure>
 
               <figure>
                   <img src="https://content.xxx/50/front-page/fondo2.jpg" class="img-responsive">
               </figure>
               <figure>
                   <img src="https://content.xxx/50/front-page/fondo3.jpg" class="img-responsive">
               </figure>
        </div>
</div>

Muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de Pedro

PROBLEMA SLIDER AUTOMÁTICO DE IMÁGENES CON NGFOR

Publicado por Pedro (8 intervenciones) el 14/11/2022 19:56:27
Hola Miriam. Por un lado, tienes que iterar sobre el componente figure y no sobre el div. Por otro lado, has de usar la variable item y no el array images en el valor del src

1
2
3
4
5
6
7
8
9
10
11
<div class="slider">
 
      <div class="slider-container">
 
         <figure *ngFor="let item of images">
 
             <img [src]="item" class="img-responsive"/>
 
         </figure>
 
      </div>

</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

PROBLEMA SLIDER AUTOMÁTICO DE IMÁGENES CON NGFOR

Publicado por Miriam (4 intervenciones) el 15/11/2022 07:02:17
Muchas gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar