[Ionic v4] Allow swiper-pagination to be styled

[peterpeterparker]

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>

[adamlacombe]

I've run into similar situations as well.

Stencil documentation: https://github.com/ionic-team/stencil-site/blob/master/src/docs-md/reference/styling.md#things-to-remember-with-shadow-dom

Unfortunately CSS Shadow Parts is a bit restrictive and would require modifying the inner-workings of the component.

My solution was to inject the styles into the shadow root using javascript.

Here is the repo: https://github.com/adamlacombe/Shadow-DOM-inject-styles

Let me know if that helps.

[peterpeterparker]

@adamlacombe thx for the idea 👍 that or writing my own slide component

in any case I would rather like an "official" solution than a workaround, but if such a thing never happens sure I'll give a try, thx

[vvdwivedi]

I am also facing the same issue, but looking in their code, they allow changing the bullet background, progress bar background and scroll bar background for now. The code right now seems to be using these variables

// Pagination Bullets
// --------------------------------------------------

.swiper-pagination-bullet {
  background: var(--bullet-background);
}

.swiper-pagination-bullet-active {
  background: var(--bullet-background-active);
}

So only for limited stuff, we can use something like this:

.custom-bullets {
  --bullet-background: #fff;
  --bullet-background-active: green;
}

where custom-bullets is a class for slides added by you. While this won't solve all the cusomization issues, but if someone is just looking to change progress bar colors, this is the way.

[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]

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.