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

  angular, css, swiper.js, swiperjs

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.

Error

<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.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.