web-dev-qa-db-ja.com

滑らかなスライダーでドットを数字に置き換えます

スリックスライダー/カルーセルのページ付けをドットではなく数字に置き換えようとしています。 js fiddleでプロジェクトを設定し、現在のスライド数を合計6つ表示するカスタム関数を使用しています。現在、ドットの代わりに「1」を使用していますが、数字で合計数を表します。スライド。

JS Fiddle Demo

HTML

<section class="slider">
 <div>slide1</div>
 <div>slide2</div>
 <div>slide3</div>
 <div>slide4</div>
 <div>slide5</div>
 <div>slide6</div>
</section>

<span class="pagingInfo"></span>

Javascript

$(".slider").slick({
autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a>1</a>';
},
responsive: [{ 
    breakpoint: 500,
    settings: {
        dots: false,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2
    } 
}]
});
javascriptcarouselslick.js
5
Mills

私があなたの意味を理解したら、この行を変更してください：

return '<a>1</a>';

これに：

return '<a>'+i+'</a>';

または

return '<a>'+(i+1)+'</a>';

インデックスを開始する場所によって異なります。

更新されたフィドルは次のとおりです。 https://jsfiddle.net/rLLvvpcm/5/

17
IanGabes