
正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。
ポイントは、「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.
かんれん
- web / 2019.1.22
- CSSだけで、三角アイコンと矢印アイコンをつくる
- web / 2018.9.3
- セレクタまとめ、最初・最後・奇数・偶数・何番目
- web / 2018.8.29
- px(ピクセル)とem(エム)
- web / 2018.10.26
- CSSだけで、線の下に、三角の影をつくる