我正在使用 swiper.js ( http://idangero.us/swiper/api/#.WCBYcxKLTfA )
请找到我当前代码的工作代码的附件: https://jsfiddle.net/0L2h1p25/12/
我现在正在尝试按照我想要的方式设置它的样式,但有两个问题需要解决。
第 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 部分: 最后,我想创建一个导航栏,以便当用户单击链接时,它将转到幻灯片,我目前没有这方面的代码,但我希望第 1 部分应该对此有所帮助。
谢谢
最佳答案
您必须使用以下代码。
new Swiper('.swiper', {
pagination: {
el: '.pagination',
clickable: true,
renderBullet: function (index, className) {
return `<span class="dot swiper-pagination-bullet">${index}</span>`;
},
},
});
关于javascript - 自定义分页 swiper.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40463206/