Estoy usando Swiper para angular y uso el envoltorio Angular Swipper con él. Estoy tratando de agregar un título personalizado y una descripción que al hacer clic se desliza a la siguiente diapositiva.

Aquí está mi código HTML:

 <swiper class="mainheader" [config]="config"> <div class="swiper-wrapper"> <div class="swiper-slide" data-pagination-subtitle="Subtitle will come here" data-pagination-title="Pagination title will come here" data-pagination-url=""> <img src="images URL" alt=""> </div> <div class="swiper-slide" data-pagination-subtitle="Subtitle will come here" data-pagination-title="Pagination title will come here" data-pagination-url=""> <img src="images URL" alt=""> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination01"></div> <!-- Add Arrows --> <div class="swiper-button-next01"></div> <div class="swiper-button-prev01"></div> </swiper>

Aquí está mi código mecanografiado:

 config: SwiperOptions = { pagination: { el: '.swiper-pagination01', clickable: true, renderBullet: function (index, className) { return ( '<span class="' +className +'"><a class="link" href="' + urls[index] + '"><span class="pagination-subtitle">' + subtitles[index] + '</span><span class="pagination-title">' + titles[index] + "</span></a></span>" ); }, }, navigation: { nextEl: '.swiper-button-next01', prevEl: '.swiper-button-prev01' }, slidesPerView: 1 };

Gracias de antemano