Я создаю слайд-шоу, используя ngx-carousel в Angular, и я хотел бы добавить код для того, чтобы провести текстовым полем одновременно с изображением. Обратите внимание, что слайд-шоу показывает 3 слайда на странице. Я хотел бы показать для каждого слайда в середине, 2-го, текстовое поле. Я пытался реализовать два разных слайд-шоу, но, видимо, не могу синхронизировать текст с нужным изображением. У вас есть идеи, как я мог бы выполнить требование? Я был бы очень признателен за любую помощь!
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'
}
];
}
}