slick.jsの左右画像が見えるスライダーで左右で見える画像幅を変えたい

Question

作成中のレスポンシブのサイトでslick.jsを使用してスライダーを実装しています。
オプションで「centerMode: true」を使い左右に前後の画像を表示していますが、
このオプションでは左右に見える画像のサイズが同じになります。

この時に左右に見えている画像幅を右と左で変更したいと考えています。
下記のようなイメージです。

色々試してみたのですがうまくいかず、
slick.jsでこのような実装をする方法をご存じないでしょうか？

また、もしslick.jsでは実現できないけど他のプラグインであれば実装できる、
などもございましたら教えていただけないでしょうか。

よろしくお願いいたします。

Answer 1

「いろいろ試した」とは。具体的に記述されたほうが何がわからないかが伝わることもあります。

.slick-slide {
    width: 50px !important;
}
.slick-slide.slick-current {
    width: 300px !important;
}
.slick-slide.slick-current + .slick-slide {
    width: 100px !important;
}

あまり大きな幅差の場合きれいにスライドしない可能性もあります。
その場合は、slickの要素の外側を囲う要素に幅を付けてoverflow: hidden;で消してしまう方法もあります。

Comments

[groco]

ご指摘ありがとうございます。
また、せっかくご回答いただいたのにコメントができておらず申し訳ございません。
幅さが大きかったので教えていただいた「overflow: hidden;」の方を試してみたところ、きれいなスライドのまま思っていた通りの見た目を実現できました。
overflow: hidden;で消してしまうという発想がなく大変助かりました。
ありがとうございます。