【jQuery】slick を使ってスライドショー（横幅いっぱい＋前後のスライドを半透明にする）

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

横幅いっぱいで、

並んでるスライドショーをつくってみましょう

実装サンプル（横幅いっぱい＋前後のスライドを半透明にする）

今回は、仕様がわかりやすいようにスライド画像の幅は「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.

実装サンプル ＋自動再生にしてみる

オプションの設定をして自動で動くようにしてみました。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル ＋自動再生にしてみる by 125naroom (@125naroom)
on CodePen.

実装サンプル ＋CSSでドットインジケーター（〇）をお洒落にしてみる

ドットインジケーターをお洒落にすると雰囲気がガラリと変わるのでおすすめです。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル ＋CSSでドットインジケーター（〇）をお洒落にしてみる by 125naroom (@125naroom)
on CodePen.

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

動きがあると楽しいですねー

slickの実装サンプルもまとめましたよー

関連記事

【jQuery】スライダープラグイン「slick」実装サンプル集

【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集