1
私はswiper.js（http://idangero.us/swiper/api/#.WCBYcxKLTfA）カスタムページネーションswiper.js
を使用して、私の現在のコードの作業コードのフィドルを添付見つけてくださいよ： https://jsfiddle.net/0L2h1p25/12/
私は今それを取得しようとしています私が欲しいと思った通りのスタイルになっていますが、修正する必要がある2つの問題があります。
パート1：ページネーションのドットがクリックできない パート2：私はそれを今停止しています、私が望むスタイルを得るためにswiper.jsに改ページを変更した ：ナビゲーション
パート1を動作しません。ユーザーが点をクリックしてスライドに移動します。
あなたは使うことになっている：
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私は
// 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,
});
望むようにスタイルを取得することはできません。 最後に、ナビゲーションバーを作成して、ユーザーがリンクをクリックしたときにスライドに移動するようにしました。現在はコードがありませんが、パート1がこれを助けることを望んでいます。
おかげ