How to put a title inside the image with ngFor using the ngx useful swiper (swiper.js)

Question

I'm trying to put a title inside an image using the ngx-useful-swiper. However, if I use absolute position in the title, the h3 is on top of each other. I would like you to stay in each one. You are using the * ngFor directive for this. I tried to change the ng-container to div but it didn't work.

 <section> <swiper [config]="config"> <div class="swiper-wrapper"> <ng-container *ngFor="let img of images"> <img class="swiper-slide" [src]="img.src" [alt]="img.alt" /> <h3>{{ img.title }}</h3> </ng-container> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </swiper> </section>

 import { Component, OnInit } from '@angular/core'; import { SwiperOptions } from 'swiper'; @Component({ selector: 'app-category', templateUrl: './category.component.html', styleUrls: ['./category.component.scss'], }) export class CategoryComponent implements OnInit { config: SwiperOptions = { speed: 500, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, spaceBetween: 20, breakpoints: { '480': { slidesPerView: 3, spaceBetween: 20, }, '768': { slidesPerView: 4, spaceBetween: 20, }, '1080': { slidesPerView: 5, spaceBetween: 20, }, '1280': { slidesPerView: 5, spaceBetween: 20, }, }, }; images: Array<object> = [ { src: 'https://loremflickr.com/g/600/400/paris', alt: 'Image 1', title: "SUV's", }, { src: 'https://loremflickr.com/600/400/brazil,rio', alt: 'Image 2', title: 'Carros para a família', }, { src: 'https://loremflickr.com/600/400/paris,girl/all', alt: 'Image 3', title: 'Carros sedan', }, { src: 'https://loremflickr.com/600/400/brazil,rio', alt: 'Image 4', title: 'Carros econômicos', }, { src: 'https://loremflickr.com/600/400/paris,girl/all', alt: 'Image 5', title: 'Picapes', }, { src: 'https://loremflickr.com/600/400/brazil,rio', alt: 'Image 6', title: 'Hatch', }, ]; constructor() {} ngOnInit(): void {} }

 section { margin: 0.6rem 2rem 0.8rem 2rem; swiper { height: 190px; width: 100%; img { border-radius: 8px; background-position: center center; background-size: cover; overflow: hidden; position: relative; }.ng-container { text-align: center; position: relative; }.title { position: absolute; top: 8px; left: 16px; } // h3 { // color: rgb(255, 255, 255); // font-size: 24px; // font-weight: 500; // line-height: 36px; // max-width: 180px; // position: relative; // // text-shadow: 1px 1px 2px black; // } } h3 { position: absolute; top: 8px; left: 16px; } }

Thanks a lot.

Answer 1

It worked by wrapping the image and the title in a div:

 <section> <swiper [config]="config"> <div class="swiper-wrapper"> <div class="swiper-slide" *ngFor="let img of images"> <div class="container-image"> <img [src]="img.src" [alt]="img.alt" /> <h3>SUV's</h3> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </swiper> </section>

 section { margin: 0.6rem 2rem 0.8rem 2rem; swiper { height: 190px; width: 100%; .swiper-slide { border-radius: 8px; overflow: hidden; }.container-image { position: relative; text-align: center; color: white; h3 { position: absolute; top: 8px; left: 16px; } } img { border-radius: 8px; background-position: center center; background-size: cover; overflow: hidden; position: relative; } } }