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

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

Webサイト制作 jQueryプラグイン

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


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

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

デモページ

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


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


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