スライダーに背景画像を付けて、その両サイドをぼかす(モザイクをかける)方法

サンプル

横幅の短い画像をスライダーに使うと画面幅によっては両サイドに大きな余白ができてしまうので、その対策などに。

サンプルのように風景写真だと結構オシャレな感じになる。

スライダーにはslickを使用。以下の記事も参照のこと。

slickスライダーで画像が左に寄るときはmarginで中央寄せにできるslickスライダーで画像が左に寄るときはmarginで中央寄せにできる slickスライダーの前後ボタンが表示されない原因と対策slickスライダーの前後ボタンが表示されない原因と対策

ソースコード

スライダーの高さを可変にしたせいで背景画像(= ぼけた画像)の高さの確保が困難になり、1枚のスライドを作るために同じ画像を2回(= ぼけていない画像を2回)使っている(1枚は非表示だけど存在はしている)点が美しくないのがデメリット。

他の方法は思いつかなかった。

スライダーの高さが画面幅に関わらず固定なら「手前の画像」と「背景の画像(= ぼけた画像)」の各1枚で普通にいけると思う。

HTML
CSS
CSS(レスポンシブ)
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です