なんにもない日の頭の中はこんなもんだったりする

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

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」実装サンプル集

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日