feat(slides): add option for paginationBulletRender

Closes #10002

src/components/slides/slides.ts

@@ -261,6 +261,10 @@ export class Slides extends Ion {
   }
   private _paginationType = 'bullets';
 
+
+  /** @private */
+  paginationBulletRender: (index?: number, cssClass?: string) => void = null;
+
   /**
    * @input {boolean} Enable, if you want to use "parallaxed" elements inside of
    * slider. Default: `false`.

src/components/slides/swiper/swiper-pagination.ts

@@ -13,7 +13,11 @@ export function updatePagination(s: Slides) {
   if (s.paginationType === 'bullets') {
     var numberOfBullets = s.loop ? Math.ceil((s._slides.length - s.loopedSlides * 2) / s.slidesPerGroup) : s._snapGrid.length;
     for (var i = 0; i < numberOfBullets; i++) {
-      paginationHTML += `<button class="${CLS.bullet}" aria-label="Go to slide ${i + 1}" data-slide-index="${i}"></button>`;
+      if (s.paginationBulletRender) {
+        paginationHTML += s.paginationBulletRender(i, CLS.bullet);
+      } else {
+        paginationHTML += `<button class="${CLS.bullet}" aria-label="Go to slide ${i + 1}" data-slide-index="${i}"></button>`;
+      }
     }
 
   } else if (s.paginationType === 'fraction') {
@@ -91,4 +95,3 @@ export function updatePaginationClasses(s: Slides) {
     });
   }
 }
-

src/components/slides/test/options/app-module.ts

@@ -20,6 +20,11 @@ export class E2EPage {
     console.log(`onSlideDrag: ${s}`);
   }
 
+  ngAfterViewInit() {
+    this.slider.paginationBulletRender = (index: number, className: string) => {
+      return `<span class="${className}">${index + 1}</span>`;
+    };
+  }
 }
 
 @Component({

src/components/slides/test/options/main.html

@@ -5,7 +5,6 @@
             (ionSlideDrag)="onSlideDrag($event)"
             pager="true"
             effect="slide"
-            paginationType="progress"
             slidesPerView="2"
             spaceBetween="40">