Benutzerdefinierte Paginierung swiper.js

Ich bin mit swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

Anbei ein fiddle von den funktionierenden code von meinem aktuellen code:
https://jsfiddle.net/0L2h1p25/12/

Ich bin jetzt versucht, es zu erhalten gestylt, wie ich es will aber es gibt 2 Probleme, die ich brauche, um die Feste.

Teil 1: Paginierung Punkte sind nicht anklickbar
Teil 2: Navigation funktioniert nicht

Teil 1:
Ich habe mich verändert die Paginierung in swiper.js um den Stil, den ich will, es ist nun angehalten die user durch den Klick auf die Punkte gelangen Sie zu der Folie.

Man verwenden sollte:

paginationClickable: true,

zulassen klicken, aber es wird nicht funktionieren, wenn Sie verwenden;

paginationType: "custom",

Ich brauche Hilfe bei folgenden code anklickbar, so dass, wenn jemand klickt auf den Punkt gebracht, geht es an die Folie.

Hier ist swiper Ausführung:

//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;
    }
});

Wenn ich die Ausführung der folgenden dann die Punkte anklickbar sind, aber ich kann Sie nicht gestylt, wie ich es will

//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,
});

Teil 2:
Zum Schluss würde ich gerne eine Navigationsleiste erstellen, so dass, wenn der Benutzer auf einen link klickt, wird er zur Folie, ich habe momentan noch keine code dafür, aber ich bin der Hoffnung, Teil 1 sollte Ihnen dabei helfen.

Dank

InformationsquelleAutor Dan | 2016-11-07