html - 如何在 ngx-carousel 中使用文本框同时滚动/滑动图像？

Question

我在 Angular 中使用 ngx-carousel 构建了一个幻灯片，我想添加代码以便与图像同时滑动文本框。请注意，幻灯片在页面上显示 3 张幻灯片。我想为中间的每张幻灯片(第二张)显示一个文本框。我试图实现两个不同的幻灯片，但显然我无法将文本与正确的图像同步。您对我如何实现该要求有任何想法吗？如果有任何帮助，我将不胜感激!

旋转木马的 html

<div ngxSlickItem *ngFor="let slide of slides" class="slide col-lg-12">
        <img src="{{ slide.img }}" alt="" width="100%">
  </div>

和 component.ts:

export class CarouselCardComponent implements OnInit {
slides: Array<object>;

slideConfig = { infinite: true,
              slidesToShow: 3,
              slidesToScroll: 1,
              arrows: true,
              dots: true,
              autoplaySpeed: 2000,
              variableWidth: false,
              avadaptiveHeight: false,
              centerPadding: '100px',
              pauseOnFocus: true,
              pauseOnHover: true,
              touchMove: true,
            };
  ngOnInit(): void {

  this.slides = [
  {img: '../assets/1.jpg',
   text: 'AAA',
  },
  {img: '../assets/2.jpg',
  text: 'text1'
  },
  {img: '../assets/3.jpg',
   text: 'text2'
  }
];
}
}

Answer 1

我也花了一些时间，但很简单。

<p>{{ slide.text }}</p>