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

【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』の実装サンプル集

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

29

2024

Googleさんの
おすすめ

3

/

29

2024

デザインの記事

であうにあう編集部 | niko and …
ケの日のケケケ
【CSS】counter-incrementを使って擬似要素をリスト化する