Как одновременно прокрутить / пролистать изображение с помощью текстового поля в ngx-карусели? - PullRequest
0 голосов
/ 01 октября 2019

Я создаю слайд-шоу, используя 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'
  }
];
}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...