Custom pagination swiper.js

Question

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 1

You must use the following code.

new Swiper('.swiper', {
  pagination: {
    el: '.pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="dot swiper-pagination-bullet">${index}</span>`;
    },
  },
});