I am using Swiper for angular and using Angular Swipper wrapper with it. I am trying to add a custom title and description which onclick swipes to next slide.

Here is my HTML code -

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

Here is my typescript code -

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

Thank in advance