javascript - 自訂分頁 swiper.js

我正在使用 swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

請查收附上的我目前程式碼的運行範例：https://jsfiddle.net/0L2h1p25/12/

我現在正試著把它設計成我想要的樣子，但有兩個問題需要解決。

第1部分：分頁點無法點擊 第2部分：導航無法使用

第1部分：我已經更改了swiper.js中的分頁，以獲得我想要的樣式，但現在用戶無法點擊圓點來切換幻燈片。

你應該使用：

paginationClickable: true,

允許點擊，但當你使用時它不會起作用；

paginationType: "custom",

我需要幫助使以下代碼可點擊，以便當有人點擊該點時，它會跳到幻燈片。

這是 swiper 執行方式：

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

如果我將執行更改為以下方式，那麼點是可以點擊的，但我無法將其設計成我想要的樣式

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

第2部分：最後，我想創建一個導航欄，這樣當用戶點擊鏈接時，它就會跳到相應的幻燈片。我目前還沒有相關代碼，但我希望第1部分應該能幫助到這一點。

謝謝

答案＃1

你必須使用以下代碼。

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

答案＃2

如果你不想在自訂元素上添加 swiper-pagination-bullet class，只需在選項中將分頁元素的自訂類別定義為 bulletClass。

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

這是此功能的文件。