【jQuery】スライダープラグイン「slick」を使って、横幅いっぱい＋前後のスライドを半透明にする

正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。
ポイントは、「overflow: hidden;」と「overflow: visible;」。

サンプル

今回は、slider要素の最大幅は「280px」で実装。
slick-list要素に「overflow: visible;」を指定することで横幅いっぱいになる。

See the Pen 【jQuery】スライダープラグイン「slick」を使って、横幅いっぱい＋前後のスライドを半透明にする by 125naroom (@125naroom) on CodePen.

サンプル NG

slick-list要素に「overflow: visible;」を指定しないと横幅いっぱいにはならない。

See the Pen 【jQuery】スライダープラグイン「slick」を使って、横幅いっぱい＋前後のスライドを半透明にする→NG by 125naroom (@125naroom) on CodePen.