<ion-slides> pagination color

[hotforfeature]

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [ ] bug report [x] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: The default pagination color is hard-coded to blue. It's possible to change the pagination color by adding the .swiper-pagination-white or .swiper-pagination-black class to the <ion-slides> element.

<ion-slides class="swiper-pagination-black">
  <ion-slide>
  </ion-slide>
</ion-slides>

Expected behavior: Their are a lot of undocumented classes for the swiper that are left over, and these are one of them.

I would expect the pagination color to default to the app's primary color. I would also expect to be able to customize the pagination through the color attribute on <ion-slides> as part of the Ion class.

<ion-slides color="dark">
  <ion-slide>
  </ion-slide>
</ion-slides>

I'm not sure if development has started on this yet, but if it hasn't I'll take a crack at a pull request if the feature has merit.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.2.1 Build version 8C1002

[brandyscarney]

@hotforfeature Thanks for the issue! I definitely see the need to be able to customize the pagination color, but I'm not sure passing it to the color input on ion-slides is the solution. I think if you pass color to ion-slides it should change the background color of all of the slides, and then ion-slide could have the same input to change it per slide. Maybe by default the active pagination bullet color could use primary, like:

$slides-pagination-bullet-color-active:       color($colors, primary) !default;

.swiper-pagination-bullet-active {
  background: $slides-pagination-bullet-color-active;
}

and then if the ion-slides has a color passed the bullet could use the contrast of the color:

@each $color-name, $color-base, $color-contrast in get-colors($colors) {

  .slides-#{$color-name} {
    .swiper-pagination-bullet-active {
      background: $color-contrast;
    }
  }

}

Of course, then the bullets wouldn't use the colors specific to the mode, but that's a different discussion. :)

[hotforfeature]

I agree with that idea, especially when you're using the slides as an image carousel, it'd be nice to set a "dark" vs "light" background color for the slides, then have the bullets change to contrast.

There's also the SVG arrow buttons and the progress bar to consider. The arrows and the bullets both overlay on the slide background, so the contrast color makes sense. However, the progress bar is by the app bar. As a default, I would assume the progress bar should be the contrast of the app bar's color.

[yunderboy]

+1

[theoomoregbee]

https://forum.ionicframework.com/t/how-to-change-the-colour-of-the-slider-pager-dots/18461/11?u=theo4u

^^^ Should help out

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/176