diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
index 43aea71959d..879ad83adf3 100644
--- a/src/components/slides/slides.ts
+++ b/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`.
diff --git a/src/components/slides/swiper/swiper-pagination.ts b/src/components/slides/swiper/swiper-pagination.ts
index 0b938be64b0..689fee059d0 100644
--- a/src/components/slides/swiper/swiper-pagination.ts
+++ b/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) {
     });
   }
 }
-
diff --git a/src/components/slides/test/options/app-module.ts b/src/components/slides/test/options/app-module.ts
index affa8b0bc9d..3f9af778893 100644
--- a/src/components/slides/test/options/app-module.ts
+++ b/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({
diff --git a/src/components/slides/test/options/main.html b/src/components/slides/test/options/main.html
index 3dc6a2240f4..48d2a59fe76 100644
--- a/src/components/slides/test/options/main.html
+++ b/src/components/slides/test/options/main.html
@@ -5,7 +5,6 @@
             (ionSlideDrag)="onSlideDrag($event)"
             pager="true"
             effect="slide"
-            paginationType="progress"
             slidesPerView="2"
             spaceBetween="40">