自定义分页 swiper.js

Question

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

请在附件中找到我当前代码的工作代码 fiddle： https://jsfiddle.net/0L2h1p25/12/

我现在正在尝试按照我想要的方式设置它的样式，但有 2 个问题我需要解决。

第 1 部分：分页点不可点击第 2 部分：导航不起作用

第 1 部分：我已经更改了 swiper.js 中的分页以获得我想要的样式，它现在阻止了用户单击圆点进入幻灯片。

你应该使用：

paginationClickable: true,

允许点击，但使用时无效；

paginationType: "custom",

我需要帮助使以下代码可点击，以便当有人点击该点时，它会转到幻灯片。

这是滑动执行：

// 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 部分：最后，我想创建一个导航栏，以便当用户单击 link 时，它将转到幻灯片，我目前没有这方面的代码，但我希望第 1 部分能对此有所帮助.

谢谢

Answer 1

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

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

Answer 2

您必须使用以下代码。

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

Answer 3

您需要将 swiper-pagination-bullet class 添加到自定义分页项中，以允许每个分页项都可以点击。然后覆盖 class.

附带的样式

const swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderCustom: 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 class="swiper-pagination-bullet active">${names[i]}</li>`;
        } else {
          text += `<li class="swiper-pagination-bullet">${names[i]}</li>`;
        }
      }
      text += "</ul>";
      return text;
    }
  }
});

Answer 4

如果您不想将 swiper-pagination-bullet class 添加到您的自定义元素，您只需在选项中将分页元素的自定义 class 定义为 bulletClass。

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

这是此功能的 documentation。

自定义分页 swiper.js

Custom pagination swiper.js

javascript

jquery

css

swiper