web-dev-qa-db-ja.com

中央モードでスリックカルーセルの全幅が機能しない

1つのスライドが中央に配置され、2つのスライドが両側に部分的に表示されるように、全幅のページスライダーを作成しようとしています。

しかし、何らかの理由で大きな白い隙間が見えます。 imgの幅を100％にしてみましたが、画像の解像度がゆがんでいます。

JQueryコード：

$('.slider').slick({
  centerMode: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  infinite: true,
  cssEase: 'linear'
});

デモ- https://jsfiddle.net/squidraj/hn7xsa4y/

どんな助けも大歓迎です。

jqueryhtmlcssslick.js
10
Prithviraj Mitra

あなたが使用してみてください：

$('.slider').slick({
centerMode:true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    variableWidth: true,
    variableHeight: true
});

これでギャップは解消されますが、CSSを追加して滑らかな<div>は、画像全体を表示するのに十分な大きさになります。関連する画像のCSSを変更することもできます。

12
Squick