How can I use slides with ionic and pagination only certain pages?

Question

I'm using ionic slides:

https://ionicframework.com/docs/api/components/slides/Slides/

I want to use pagination with bullet:

That work fine, but now I have:

• A title slide
• Than 5-6 slides for this title
• Than another title slide
• Than 5-6 slides for this title
• ETC

I want than have the bullets only for the title pages.

Anybody know how can I achieve this? Thanks

Answer 1

This is what I would do. Basically I would define the title pages like this:

private titleSlides = {
    "1": "title",
    "5": "title",
    "8": "title"
};

Then I wrote this function to hide bullets that aren't title pages:

@ViewChild(Slides) private slides: Slides;

private changePagination () : void {
    // get active index
    let index = this.slides.getActiveIndex();
    // get the pager bullets (maybe need to be selected different, when multiple slides on one page)
    let bullets = document.getElementsByClassName('swiper-pagination-bullet');

    for (let i = 0; i < bullets.length; i++) {
        if (index == 0) {
            if (this.titleSlides[i]) {
                (bullets[i] as HTMLElement).style.display = 'inline-block';
            } else {
                (bullets[i] as HTMLElement).style.display = 'none';
            }
        } else {
            (bullets[i] as HTMLElement).style.display = 'none';
        }
    }
}

To call this function you can use following lifecycle/onChange functions :

ionSlideDidChange() {
    this.changePagination();
}

ngAfterViewChecked () {
    this.changePagination();
}

And finally your html :

<ion-slides pager="true" (ionSlideDidChange)="ionSlideDidChange()">
    <ion-slide>
        Global
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
    <ion-slide>
        Slide 2
    </ion-slide>
    <ion-slide>
        Slide 3
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
    <ion-slide>
        Slide 2
    </ion-slide>
    <ion-slide>
        Title
    </ion-slide>
    <ion-slide>
        Slide 1
    </ion-slide>
</ion-slides>