web-dev-qa-db-ja.com

スリックスライダーでセンターモードなしで次のスライドの半分を表示する

私が欲しいのは、一度に3.5枚のスライドを表示するスライダーを持ち、右端のスライドが半分だけ表示されるスライドにすることです。 centerModeとcenterPaddingを滑らかなスライダーで使用して、このようなことが正常に行われたことを確認しましたが、スライドを中央に配置したくありません。言い換えれば、左端のスライドは完全に見えるようにウィンドウの側面と同じ高さになり、右端のスライドはウィンドウの半分で半分になります。これは滑らかに可能ですか? slidesToShow:3.5を使用している人を見たことがありますが、これにより左端のスライドが画面の半分になり、右側に必要になります。

10
Cook88

「slidesToShow:3.5オプション」を追加する必要はありません

スリックを呼び出すだけ:-

$('.Your-container').slick({
    arrows: false,
});

次のCSSを追加します。

.slick-list{padding:0 20% 0 0;}

右側またはパーセンテージに固定パディングを指定できます。

31
Abdul Rahman

次のようなことができますslidesToShow: 3.5 そして、作ります infinite: false。右端のスライドには半分が表示されます。

17
kophygiddie

Slick initに次の2つのパラメーターを追加して、slickでこれを行うこともできます。

centerMode: true,
centerPadding: '20%',

これは次と同等です

.slick-list{padding:0 20% 0 0;}
8
Gcamara14

slidesToShowを小数点以下で使用することに注意してください。

公式ドキュメントslidesToShowによると、タイプはintであり、floatではありません。これをfloatとして使用すると、breakpointイベントで予期しない例外が発生します(カスタムブレークポイントオプションが指定されている場合)。

これらの問題の詳細については、公式のSlick GitHubスレッド herehere を参照してください。

3
kosmeln