読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

bodyの横幅一杯に表示するスライダー 「Responsive FullWide Slider」

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



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

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

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

black-flag.net


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


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