Dan Dan - 16 days ago 8
CSS Question

Custom pagination swiper.js

I'm using swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

Please find attached a fiddle of the working code of my current code:
https://jsfiddle.net/0L2h1p25/12/

I'm now trying to get it styled the way I want but there are 2 issues I need to get fixed.

Part 1: Pagination dots are not clickable
Part 2: Navigation does not work

Part 1:
I've changed the pagination in swiper.js in order to get the style I want, it's now stopped the user from clicking on the dots to get to the slide.

You're supposed to use:

paginationClickable: true,


to allow clicking but it won't work when you use;

paginationType: "custom",


I need help making the following code clickable so when someone clicks on the dot, it goes to the slide.

Here's swiper execution:

// Swiper Execution
var swiper = new Swiper('.hero-container', {
direction: 'horizontal',
pagination: '.cd-slider',
nextButton: '.swiper-next',
prevButton: '.swiper-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
loop: true,
speed: 400,
effect: 'slide',
keyboardControl: true,
hashnav: true,
useCSS3Transforms: false,
paginationType: "custom",
paginationCustomRender: function(swiper, current, total) {
var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
names.push($(this).data("name"));
});
var text = "<ul>";
for (let i = 1; i <= total; i++) {
if (current == i) {
text += "<li><a class='active'><span class='cd-dot'></span><span class='cd-label'>Item 1</span></a></li>";
} else {
text += "<li><a><span class='cd-dot'></span><span class='cd-label'></span></a></li>";
}

}
text += "</ul>";
return text;
}
});


If I change the execution to the following then the dots are clickable but i can't get it styled the way I want

// Swiper Execution
var swiper = new Swiper('.hero-container', {
direction: 'horizontal',
pagination: '.cd-slider',
nextButton: '.swiper-next',
prevButton: '.swiper-prev',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
loop: true,
speed: 400,
effect: 'slide',
keyboardControl: true,
hashnav: true,
useCSS3Transforms: false,
});


Part 2:
Finally I would like to create a navigation bar so that when the user clicks on a link, it will go to the slide, i've currently got no code for this but i'm hoping part 1 should help with this.

Thanks

Answer

Its not possible with swiper's options you can try writing it yourself like I did look at the answer to this question swiper custom pagination only slides once

I wrote a function that creates pagination text and commands slider to slide to the appropriate item.

Comments