自定义分页swiper.js

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

请查找我当前代码的工作代码的小提琴： https ： //jsfiddle.net/0L2h1p25/12/

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

第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 = "
"; for (let i = 1; i <= total; i++) { if (current == i) { text += "
Item 1
"; } else { text += "
"; } } text += "
"; 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部分应该有所帮助。

谢谢

Answer 1

它不可能与swiper的选项你可以尝试自己写，就像我看到这个问题的答案swiper自定义分页只滑动一次

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