1
我使用swiper.js（http://idangero.us/swiper/api/#.WCBYcxKLTfA）自定義分頁swiper.js
隨函附上我目前的代碼工作代碼小提琴： 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部分： 最後，我想創建一個導航欄，以便當用戶點擊一個鏈接，它會去幻燈片，我目前沒有代碼，但我希望第1部分應該幫助這個。
感謝