滑らかなスライダ点の再配置 - 複数の位置

Question

滑らかなスライダ（http://kenwheeler.github.io/slick/）を使用しています。私は滑らかなスライダのために滑らかなドットを再配置することが可能かどうか疑問に思っていました。（スライダーでは、スライダのイメージではなくフルスライダを意味します。それらの中の一つ）。

私はこのポスト slick slider dots repositioning再配置を発見したと認められたソリューションは、限り、あなたは（一緒にすべてのスライダーのために）すべてのドットを移動すると正常に動作します：

.slick-dots { 
 
    top: 100px; // play with the number of pixels to position it as you want 
 
    left: 100px; // play with the number of pixels to position it as you want 
 
}

どのようにすることができます特定のスライダーのドットのみを再配置しますか？ .slick-dotsクラスはすべてのスライダに適用され、ソースコードはCDNにあります。コード参考

このフィドルhttps://jsfiddle.net/5ox31m2a/89/を参照してください（これは1つのスライダー、手元に問題のない完全な表現のほんの一例であることに注意）してください。事前に

おかげであなたは、プラグインの最新バージョンを使用する必要があり、すべての

Answer 1

まず、現在のバージョンは1.8.1

です次に、あなたは上の明確な属性を設定するafterChangeイベントを使用することができますCSSを使用してスタイリングすることができます。例えば

、

$('.slider').on('afterChange',function(e, slick, currentSlide){ 
    slick.$dots.attr('data-current-slide', currentSlide); 
}); 

上記は、現在のスライドに一致する値とdata-current-slideという名前の属性を設定します。スタイリングの目的で、[data-current-slide="XX"]のCSSでターゲットを設定できます。現在のスライドは、あなたがslidesToScrollオプション

参照を使用する方法によって異なります。あなたはスライド3
ノートの上にあるときに

.slick-dots[data-current-slide="3"]{ 
    bottom: -20px; 
} 

を使用して例えば

は写真の下にドットを移動しますデモ：https://jsfiddle.net/gaby/1hoztaay/