如何使用 ngx 有用的滑动条 (swiper.js) 通过 ngFor 在图像中添加标题

Question

我正在尝试使用 ngx-useful-swiper 在图像中添加标题。但是，如果我在标题中使用绝对位置，则 h3 会相互重叠。我希望你留在每一个。您正在为此使用 * ngFor 指令。我试图将 ng-container 更改为 div 但它没有用。

<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;
    
  }
}

非常感谢。

Answer 1

它通过将图像和标题包装在 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;
    }
  }
}

如何使用 ngx 有用的滑动条 (swiper.js) 通过 ngFor 在图像中添加标题

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

css

angular

swiperjs

swiper.js