CODEWITHSUNDEEP
ionic-framework
tivoni
tivoni

Reputation: 2020

How to hide ion-slides pager?

I use the ion-slide directive documented here and I cannot find a method to hide the pager. I tried setting the pager attribute as in:

<ion-slides options="myOptions" pager="false" slider="mySlide[item.id]">

however that does not work, the pager bullets are still showing.

Is it possible to hide the ion-slides pager, and if so - how?

Upvotes: 8

Views: 14037

Answers (6)

SandroMarques
SandroMarques

Reputation: 6534

Just remove pager.

Example:

<ion-slides pager loop autoplay="1500" class="auto_height"> ...

just put (without "pager"):

<ion-slides loop autoplay="1500" class="auto_height"> ...

Upvotes: 2

kushal
kushal

Reputation: 156

Just add this in your css: 

.swiper-pagination-bullet{
   background:white!important;
   border-radius: 100%;
   height: 17px;   
   width: 17px;
   display: none;
}

Hope this helps

Upvotes: 4

kaya
kaya

Reputation: 754

May be you can do like this;

paginationType: 'custom',
paginationBulletRender: function (index, className) {
     return '';
}

This is better than pagination:false

Upvotes: 0

Steph8
Steph8

Reputation: 1583

official solution:

options="{pagination: false}"

Upvotes: 24

Steph8
Steph8

Reputation: 1583

i'm searching a solution for this question. I'm workig on this since 2 days.. But nothing. Do you resolve this problem? I added .slider-pager { display:none; } but the dots still remain!

Upvotes: 0

Chewpers
Chewpers

Reputation: 2440

If these slides are being added to an ion-slide-box, you can:

show-pager="false"

on the ion-slide-box. See the docs for more info.

You might also be able to hide them via css like:

.slider-pager { display:none; }

Upvotes: 1

Related Questions