javascript - Prilagođena paginacija swiper.js

Koristim swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

Molimo vas da u privitku pronađete fiddle s radnim kodom mog trenutnog koda: https://jsfiddle.net/0L2h1p25/12/

Sad pokušavam stilizirati to onako kako želim, ali postoje dva problema koja trebam riješiti.

Dio 1: Točkice za paginaciju nisu klikabilne Dio 2: Navigacija ne radi

Dio 1: Promijenio sam numeraciju stranica u swiper.js kako bih dobio stil koji želim, sada je onemogućeno korisniku da klikne na točkice kako bi prešao na slajd.

Trebao bi koristiti:

paginationClickable: true,

da omogućite klik, ali neće raditi kada koristite;

paginationType: "custom",

Trebam pomoć da sljedeći kod učinim klikabilnim tako da, kada netko klikne na točku, ide na slajd.

Evo izvršenja swiper-a:

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

Ako promijenim izvršavanje na sljedeće, točkice su klikabilne, ali ih ne mogu stilizirati onako kako želim

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

Dio 2: Konačno bih htio stvoriti navigacijsku traku tako da kada korisnik klikne na poveznicu, ona ode na slajd. Trenutno nemam nikakav kod za to, ali se nadam da bi prvi dio trebao pomoći u tome.

Hvala

Odgovor #1

Morate koristiti sljedeći kod.

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

Odgovor #2

Samo trebate definirati prilagođenu klasu vašeg elementa za paginaciju kao bulletClass u vašim opcijama ako ne želite dodati swiper-pagination-bullet class vašem prilagođenom elementu.

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

Evo dokumentacije za ovu funkciju.