CODEWITHSUNDEEP
angularionic-frameworkpaginationswiper.js
anubis
anubis

Reputation: 1505

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

I'm using ionic slides:

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

I want to use pagination with bullet:

enter image description here

That work fine, but now I have:

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

Anybody know how can I achieve this? Thanks

Upvotes: 0

Views: 1269

Answers (1)

Stephan Strate
Stephan Strate

Reputation: 1411

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>

Upvotes: 1

Related Questions