レスポンシブ半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたのでここでも紹介してみたいと思います。スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示スライダー中心にメイン表示エリアを設置してその前後の画像は左右に透過させたような形でスライド要素をブラウザ枠めいっぱいに並べて配置しています。全体がブラウザ幅に合わせた形で伸び縮みします。左右の透過エリアはスライダーのNEXT/BACKボタンとなっているのでクリックすることで一つずつスライダーを移動させることができます。NEXT/BACKボタンに加えて表示するコンテンツ要素分のページネーションが付加するようにしてあるのでページネーションの各ボタンをクリックさせることで任意のスライド番号へ移動させることも可能です。※2014/01/15追記スライドメイン部分をフリック動作させることで、スライド移動させることも可能です。動作仕様については以上になります。全体構成についてまずはHTMLから。/></a></li></ul></div><!--/.wideslider-->クラスやIDを付けた任意のブロック要素の中に<ul>リストを使ってコンテンツ要素(サンプル画面で言うメイン画像)を並べます。サンプルではコンテンツ要素を5つにしていますがこれを増減させるには単純に<li>の数を増減するだけです。前回のスライダーと違う点は<img>タグの属性には「width」と「height」属性はつけない構成にしてあります。ページネーションや左右のNEXT/BACKボタンはスクリプト側から生成するようにしているのでHTMLには記述しません。CSSは以下の様になります。hidden;}スライド左右の透過NEXT/BACKボタン部分の色・見た目やページネーションの色味などはCSSで指定します。スライド要素の幅や高さについてはスクリプト側で制御するので、ここでは記述していません。実際の動作スクリプトは以下の様になります。'1'){wsTimer();}}});}setTimeout(function(){setSlide();},500);});});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。0.5ページネーションの透過具合これらの設定値を変更することでもろもろ調整が可能になっています。スクリプト全体はあまりシンプルと言える構成ではありませんが少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。設置の際の簡単な注意点としては画像サイズ(比率)によって各エリアの幅と高さを取得して制御していることもあり使用する(スライドさせる)画像は全て幅と高さを同サイズのものを使用する必要があります。HTML構成上、このコンテンツスライダー要素全体を囲うブロック要素があった場合は、その要素の幅は100%になっている必要があります。スライドアニメーション実行中にブラウザ幅を変えられたりするとスライド位置がおかしくなることがありますがページネーションをクリックする、もしくは自動スライド機能でスライド全体が一周すると正常に位置が調整されるようになっています。カスタマイズに関してはjQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたりCSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。生成される際に個別に「.pn(n)」のクラスが付与されるようになっているのでCSS側からそれらのクラスに対して背景画像を指定することでサムネイル画像として表示させることも可能です。「.pn5」という風に個別に付与されます。jQueryイージングプラグインを使ってスライドアニメーションにイージング処理をつけて、ページネーションをスライドエリアの外にしてサムネイル表示にした場合は以下の様な見た目にすることができます。jQueryイージング+ページネーションをエリア外+サムネイル表示にしたパターンのサンプルを別枠で表示ブラウザの幅をめいっぱい使ってスライダーを設置することでダイナミックな演出を組み込むことが可能かと思っています。レスポンシブ対応させたブラウザウィンドウ幅めいっぱいのコンテンツスライダーを実装する際にぜひ。13:04ちょうどフルワイドのレスポンシブスライダーを探していて、このページにたどり着きました。1つ質問をさせてください。スライダーの下に幅指定をしてセンター揃えのコンテンツを配置した際、コンテンツがセンターから左に6pxほどずれるんですが、これは何か工夫がいるんでしょうか?高さがあまりない状態だとずれないんですが、高さが500pxほどのコンテンツを配置すると少し左にずれます。スタイルもひととおり見てみたのですが、よくわかりません。ご教授いただけると幸いです。1:44>Tomoさんコメントありがとうございます。このコンテンツスライダーをご活用いただいているようで嬉しく思っております。ご質問いただきました件についてですが実装されているページの画面構成が不明なのと全体のHTMLおよびCSSの構成が分からないとちょっと何も判断することができないです。URLなどお知らせいただければ調査できるかもしれませんが・・・ご検討ください。13:00ご回答ありがとうございます。URLを記載しました。ダウンロードしたファイルに追記しているのみです。h1やフッターもずれているようです。0:24>Tomoさんご連絡ありがとうございました。確認させていただきましたところブラウザウィンドウ幅を取得する際のスクロールバー有り無しの場合での計算部分の原因かと思われましたので記事内のスクリプトの方、再度調整してみました。この構成で大丈夫かと思いますがご確認くださいませ。12:48お礼が遅れてもうしわけありません。この度はご対応ありがとうございました。今後もありがたく参考にさせていただきます。18:03jQueryでスライダーを探してここへ来て拝見させていただきました。『jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置』と同じ内容で3D回転のようなスライダーの記事を見かけたように思いますが、探しても記事が見当たりません。私の勘違いでしたら申し訳ありませんが、内容が解るようでしたら、アドレスを教えて貰えないでしょうか?勝手なお願いで申し訳ないですがよろしくお願いします。0:20>モリックさんコメントありがとうございます。slider」http://black-flag.net/jquery/20120822-4098.html違う場合は当ブログの右肩にある検索枠に「3D」と入れて検索していただければいくつか3Dスライダーが出てくるかと思います。