Currently I have slides that show the number of index in the bullets, but I am not able to find out how to have a custom text inside that bullets instead of the index number.
Here is a fiddle of the result that I want to achieve, but it is in JavaScript, I don’t know how to achieve that in Ionic2:
Any ideas?
Hi @croi, you should check out the post I wrote over here. Check out the iDangerous Swiper api, it talks about the paginationbulletrender functionality.
You should attach options to your Swiper. How to do that is also explained over there. Then you should set the option PaginationBulletRender, and you can apply your custom class styles. The option example from their docs looks something like this:
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
You should apply the classname you want to use and then you can style it in any way you want!
Hi @luukschoen, I’ve already done that!
To be specific here is my code:
A part from the file : page.html
<ion-slides pager [options]="features">
<ion-slide *ngFor="#cat of categories">
<ion-row>
<ion-col>
<div>{{cat.category}}<div>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
I want somehow to show {{cat.category}} instead of the bullet number
a part of the file (Angular2) : page.js
this.features = {
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
}
Any idea how to achieve that?
Hi there! You’re already on the right path. Since you pass the corresponding index of the slide, you can just reach the category by accessing it through categories[index] inside your paginationBulletRender option.
Some further clarification:
As you can understand it only shows the slide number at this point, namely index + 1. Since an array starts (as you probably know very well) at index zero, index + 1 gives you the first slide in case it’s index is zero etc etc.
Since you’re iterating through an array of some sort, the index numbers of the slides are equal to the category shown. In other words, if you want to display some info of the active category, just grab the same position out of the categories array by doing this: categories[index]. if it’s an object of some sort, display it with categories[index].category or whatever property you want to use. If it’s just a flat array with strings, setting categories[index] should be enough.
Then your option property should be something like:
paginationBulletRender: function (index, className) {
return '<span class="' + className + '">' + categories[index] + '</span>';
}Thanks for your follow-up.
The issue is that categories[index] shows undefined as it runs inside the constructor, check this out:
constructor(viewCtrl, http, navParams) {
this.viewCtrl = viewCtrl;
this.navParams = navParams;
this.http = http;
this.category = null;
this.http.get('https://website.com/api', { search }).subscribe(data => {
this.category = data.json().results;
});
//I want to print the new value of 'this.category' here
//e.g: console.log(this.category);
this.Pages = {
pagination: '.swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
paginationBulletRender: function (index, className) {
//also I want to access it here
return '<span class="' + className + '">' + this.category[index+1] + '</span>';
}
}
}
I am still locked there!
Did you try that :
<ion-slides *ngIf=“categories.length” pager [options]=“features”>
By the way, the slides will be prepared right after the array is fully prepared.
Just simply use pager=“true” inside your tag:
Like this:
<ion-slides pager="true"> <ion-slide></ion-slide> <ion-slide></ion-slide> <ion-slide></ion-slide> </ion-slides>
With the new removal of options, you can still use paginationBulletRenderer like this:
this.slides.paginationBulletRender = (index, defaultClass) => {
return '<span class="' + defaultClass + '"></span>';
}
};
We can have Custom Pagination In Ionic Slides Component.
1) Fractional Pagination
Configuration
//Configuration for each Slider
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
}
};
2) Numbered Pagination
//Configuration for each Slider
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay:true,pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
}
};
Complete Tutorial Link