[Ionic v4] Allow swiper-pagination to be styled

Ionic Info @ionic/angular: “4.0.0-beta.1”

Describe the Feature Request I would like to be able to style the swiper-pagination element of the slides

For example, in my v3 app, I display the pagination as progressbar at the bottom of the slides

Because of shadow dom, this isn’t possible anymore, a style like the following won’t be applied

div.swiper-pagination.swiper-pagination-progressbar {
    top: inherit;
    bottom: 0;
}

Related Code

slideOptsProgressbar: SwiperOptions = {
    pagination: {
        el: '.swiper-pagination',
        type: 'progressbar'
    }
};

<ion-slides pager="true" [options]="slideOptsProgressbar">
</ion-slides>

[peterpeterparker]

Do you like hacks? Do you like having the pagination of your swiper positioned at the bottom of your slider but without touching the nested element?

Here you go: the tricks is to declare the swiper options as custom but to actually render a slider as progressBar but with a bottom position 😜

<ion-slides pager="true" [options]="slideOptsProgressbar">
</ion-slides>

 slideOptsProgressbar: SwiperOptions = {
    pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        renderCustom: (swiper, current, total) => {
            return this.customProgressBar(current, total);
        }
    }
};

private customProgressBar(current: number, total: number): string {
    const ratio: number = current / total;

    const progressBarStyle: string = 'style=\'transform: translate3d(0px, 0px, 0px) scaleX(' + ratio + ') scaleY(1); transition-duration: 300ms;\'';
    const progressBar: string = '<span class=\'swiper-pagination-progressbar-fill\' ' + progressBarStyle + '></span>';

    let progressBarContainer: string = '<div class=\'swiper-pagination-progressbar\' style=\'height: 4px; top: 6px; width: 100%;\'>';
    progressBarContainer += progressBar;
    progressBarContainer += '</span></div>';

    return progressBarContainer;
}

enjoy

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.