Automatic slider with ngFor-CodePudding

I have this array of images in my component.ts:

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"
];

And this div in my component.html:

    <div >
    
          <div  *ngFor="let item of images">
       
             <figure>
          
                 <img [src]="images" />
       
             </figure>
                                                                                 
          </div>

    </div>

My problem is that I only see the first image in the slider.

Before I had this in the component.html and I saw the three images but when passing it to array I only see the first one.

<div >
           <div >
               <figure>
                   <img src="https://content.xxx/50/front-page/fondo1.jpg" > 
               </figure>

               <figure>
                   <img src="https://content.xxx/50/front-page/fondo2.jpg" > 
               </figure>

               <figure>
                   <img src="https://content.xxx/50/front-page/fondo3.jpg" > 
               </figure>
                                           
            </div>
</div>

Thank you

In the question I have put what I expected and what I have tried

CodePudding user response：

You should adjust your code to use *ngFor directive in your figure tag in order to achieve what you had before, only dymanically:

<div >
    
          <div >
       
             <figure *ngFor="let item of images">
          
                 <img [src]="item" />
       
             </figure>
                                                                                 
          </div>

    </div>

CodePudding user response：

You are passing the wrong image src, pass "item" instead of images, Like this.

  <div >
          <div  *ngFor="let item of images">
             <figure>
                 <img [src]="item" />
             </figure>                                                                      
          </div>
    </div>