jQuery FullWide Slider

jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BlackFlag

jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 jQueryを使ってのコンテンツスライダーや画像スライドショーなどを 出来るだけシンプルなスクリプトでに実装する実験やサンプルをいくつか紹介してきていますが 最近よく見かける（流行り？）ブラウザウィンドウ画面の幅をめいっぱい使って コンテンツ要素をスライドさせて魅せるコンテンツスライダーを まだ試したことがなかったので実験的に作ってみたのものを紹介してみます。 jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 今回のスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。。。 「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して その前後の画像は左右に透過させたような形で スライド要素をブラウザ枠めいっぱいに並べて配置しています。 （ウィンドウサイズを変更した際にも枠に合わせて左右の透過エリアが広がります） 左右の透過エリアはスライダーのNEXT／BACKボタンとなっているので クリックすることで一つずつスライダーを移動させることができます。 NEXT／BACKボタンに加えて 表示するコンテンツ要素分のページネーションが付加するようにしてあるので ページネーションの各ボタンをクリックさせることで 任意のスライド番号へ移動させることも可能です。 動作仕様については以上になります。 全体構成についてまずはHTMLから。 ◆HTML クラスやIDを付けた任意のブロック要素の中に ＜ul＞リストを使ってコンテンツ要素（サンプル画面で言うメイン画像）を並べます。 サンプルではコンテンツ要素を5つにしていますが これを増減させるには単純に＜li＞の数を増減するだけです。 ページネーションや左右のNEXT／BACKボタンは スクリプト側から生成するようにしているので HTMLには記述しません。 そしてCSSは以下の様になります。 ◆CSS .wideslider { width: 100%; height: 500px; text-align: left; position: relative; overflow: hidden; } .wideslider ul, .wideslider ul li { float: left; display: inline; overflow: hidden; } .wideslider_base { top: 0; position: absolute; } .wideslider_wrap { top: 0; position: absolute; overflow: hidden; } .slider_prev, .slider_next { top: 0; overflow: hidden; position: absolute; z-index: 100; cursor: pointer; } .slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;} .slider_next {background: #fff

http://black-flag.net/jquery/20121219-4407.html

jQuery FullWide Slider

jQuery FullWide Slider

http://tmblr.co/ZdKHsxZg0PYa