Javascript 自定义分页swiper.js

我正在使用swiper.js（）

请在附件中找到我当前代码的工作代码：

我现在正试图让它的风格，我想要的方式，但有两个问题，我需要得到修复

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

第2部分： 最后，我想创建一个导航栏，这样当用户点击一个链接时，它就会转到幻灯片，目前我还没有这方面的代码，但我希望第1部分能够对此有所帮助

---

谢谢

使用swiper的选项是不可能的，您可以像我一样尝试自己编写 看看这个问题的答案

---

我编写了一个函数，创建分页文本，并命令slider滑动到适当的项目

必须使用以下代码

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

newswiper（“.Swiper”{
分页：{
el:“.pagination”，
可点击：正确，
renderBullet:函数（索引、类名）{
返回`${index}`；
},
},
});

您需要将

swiper分页项目符号

类添加到自定义分页项目中，以允许单击每个分页项目。然后覆盖该类附带的样式

const swiper=new swiper（“.swiper container”{
循环：对，
分页：{
el:“.swiper分页”，
可点击：正确，
RenderCastom：函数（swiper、current、total）{
变量名称=[]；
$（“.swiper wrapper.swiper slide”）。每个（函数（i）{
names.push（$（this.data（“name”））；
});
var text=“
”；
for（设i=1；i
new Swiper('.swiper', {
  pagination: {
    el: '.pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="dot swiper-pagination-bullet">${index}</span>`;
    },
  },
});