javascript - Anpassad paginering swiper.js

Jag använder swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

Vänligen hitta bifogat en fiddle med den fungerande koden av min nuvarande kod: https://jsfiddle.net/0L2h1p25/12/

Jag försöker nu få det stylat på det sätt jag vill men det finns två problem jag behöver få åtgärdade.

Del 1: Sidnummerpunkter går inte att klicka på Del 2: Navigeringen fungerar inte

Del 1: Jag har ändrat sidnumreringen i swiper.js för att få den stil jag vill ha, det har nu stoppat användaren från att klicka på prickarna för att komma till bilden.

Du ska använda:

paginationClickable: true,

att tillåta klick, men det kommer inte att fungera när du använder;

paginationType: "custom",

Jag behöver hjälp med att göra följande kod klickbar så att när någon klickar på punkten går det till bilden.

Här är swiper-exekveringen:

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

Om jag ändrar exekveringen till följande blir prickarna klickbara, men jag kan inte få dem stylade på det sätt jag vill

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

Del 2: Slutligen skulle jag vilja skapa en navigeringsfält så att när användaren klickar på en länk, kommer det att gå till bilden, jag har för närvarande ingen kod för detta men jag hoppas att del 1 ska hjälpa med detta.

Tack

Svar #1

Du måste använda följande kod.

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

Svar #2

Du behöver bara definiera den anpassade klassen för ditt pagineringsobjekt som bulletClass i dina alternativ om du inte vill lägga till swiper-pagination-bullet class till ditt anpassade objekt.

bulletClass: 'my-custom-pagination-item',

Här är dokumentationen för den här funktionen.