【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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

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

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

関連記事