Will.Harris Will.Harris - 1 year ago 304
AngularJS Question

Ionic - Pagination is being hidden with new ion-slides component (Swiper)

I'm using the

component (Ionic v1.2.4) which uses Swiper and I'm experiencing issues with the pagination being hidden when too many (> 10) slides are being used.

I've modified this JSFiddle to demonstrate the problem I'm experiencing, notice if you remove a slide from the HTML the pagination displays accordingly.

Can anybody tell me how to force the pagination to display still?


This is something Ionic have implemented for whatever reason as pointed out by @nico. They should probably make this configurable leaving it up to the developer on whether the pagination should be hidden after 10 slides.

My solution below is one workaround for now though if anybody wants the pagination to display.

Answer Source

I found a solution which i'll share with everyone in case you have been stuck with this.

What I did was create my own custom pagination as this way the ng-hide class doesn't get added, luckily Swiper allows you to do this quite easily.

To do this add a <div> element to bind the pagination to like so

<ion-slides options="swiper.options" slider="swiper.data.slider">
      <ion-slide-page ng-repeat="item in slides.Tasks" >                              
<div class="custom-swiper-pagination swiper-pagination"></div>

Notice the swiper-pagination class that I also added, this is Ionic's default class for pagination styling.

And then create the binding in the Swipers options in the controller like this so that pagination stuff will automatically be added under this new div container

$scope.swiper = {
        options: {
            pagination: '.custom-swiper-pagination',
            paginationClickable: true,
            loop: false,
            direction: 'horizontal',
            spaceBetween: 20,
            speed: 600
        data: {}

And finally add some CSS to style your new div container. I copied the exact stuff from Ionic's css file for horizontal bulleted pagination.

.custom-swiper-pagination {
  bottom: 0px;
  left: 0;

.custom-swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px; 

And here is the updated JSFiddle for a live example.


Like @nico has pointed out this is not so much an error because a flag is being used showPager in conjunction with an ng-if to hide the pagination. But it is something people would like control over so it is probably an issue that needs to be made configurable by Ionic.

My solution still works as a temporary fix though if you don't fancy manually editing the Ionic library code.

Some of the raised issues regarding this can be found here Ionic's GitHub repo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download