bodyの横幅一杯に表示するスライダーjQuery

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。

今回のスライドショーの主なポイント

• ブラウザー幅一杯にスライドを表示させる
• 左右の画像は半透明のブラーがかかっている
• レスポンシブサイトなので、フリックにも対応

デモページ

レスポンシブ対応サイト制作wideslider版

今回使ったjQueryプラグインjQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 | BlackFlag

モデルにした既存サイトKIRIN｜キリン