Ionic slider customize the pager section to add some functionality

Is there any way to customize the content of the slider pager?

I am currently doing it with buttons that are position: absolute. But it’s not ideal because they move with the slides and the pager dots don’t.

I am wondering if there is a way to set a custom pager. I didn’t find a way to do it in ionic2.

Just put it out of ion-slides

Yeah that could work too thx. So there is no way to configure the bottom section I guess.

Do you need to configure the skip and the next? really? ) You have to explain that do you do/
By the way, you could use output events.

PS try read this http://idangero.us/swiper/api/#.VyEHd_l96hc

It’s to make it obvious for people who aren’t familiar with swiping.

Thank I, I went through their doc, but maybe I missed something.

You need change your design, I think.
At time that you click next, you need just call the next slide. And if you need know this new slide, you could get the output event from the slider.
By the way, the pager out of slides too.

Yes I put the pager outside, it works better and I changed the button when people get on the last slide. Thx for your input :slight_smile:

I used to have slide specific buttons instead, but this is better.

How did you put the pager outside?

just put buttons outside of the slider element

access it from your ts and hook to click events on your buttons to call slider actions.

@ViewChild('slides') slider: any;
nextSlide() {
    this.slider.slideNext();
}
1 Like

That I know how to do, I dont understand how to get like the first post, the pager bullets outside.

your question wasn’t clear, just hide them and show yours outside.

Im feeling slow, I made a slide with 6 images I hide the pager and made a footer where I placed a button that is connected through viewchild and can change the slide. But I want the same amount of pager bullets in my footer.

Check out:

slider.length()

I thought it was possible to do it without making new slider outside.

Been trying for long time now, but cant figure it out, dont know how to get the slider length at the right time and dont know how to get the same amount of pager bullets in the footer

<ion-content padding>
<ion-slides   #slides >
  <ion-slide *ngFor="let b of name">{{b}}</ion-slide>
</ion-slides>
</ion-content>
<ion-footer>
  <button ion-button icon-only clear (click)="getPrev()"><ion-icon name="arrow-back"></ion-icon></button>
  <button ion-button icon-only clear (click)="getNext()"><ion-icon name="arrow-forward"></ion-icon></button>
</ion-footer>

export class HomePage {
  @ViewChild('slides')slider:any;
name = ["George","Kalle","Canelo","Chavez"];
  constructor(public navCtrl: NavController) { 
  }
  getNext(){
    this.slider.slideNext() 
  }
   getPrev(){
    this.slider.slidePrev()
  }
}

After clicking last or 1st element i want disable or hide the button. please tell

use a conditional class= for each button which if true add the string ‘visibility: hidden’ to the button…
the test if on 1st page true hide button 1
and it on last page hide button 2