jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
jQueryプラグインなスライダー | かえラボBlog
jQueryプラグインにチャレンジしてみました。 よくあるスライダーです。 (10/26 追記) iPhone&iPad対応しました。 細かいことはCSSで調整ください (9/7 追記) ドラッグに対応しました。 slider.js Demo HTML側の記述は下記を参考ください。 <div class="slideFrame"> <ul class="slideGuide" id="slide-00"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> <div class="slideCtrl left"><</div> <div class="slideCtrl right">></div> </div> リスト要素の部分はdiv要素など他のブロック要素でも構いません。 ガイド用クラス(.slide
jQueryでローテーションバナーを実装
jQueryでローテーションバナーを実装 jQuery2011年12月14日 少し前はローテーションバナーはFlashで作成する場合が多かったと思いますが、最近ではJavascriptで制作する案件も増えてきています。 今回は、jQueryを使用してローテーションバナーを実装してみましたので、どうぞご参考にしてみてください。 jQueryはこちらからダウンロード jQuery Easing 実際のサンプル 仕様 最大個数に規定はなし 自動スクロールはなし リピート機能はなし 左右に移動ボタンを配置 一番右に移動した際、右ボタンをグレーアウト 一番左に移動した際、左ボタンをグレーアウト バナーが3個以下の場合、左右の移動ボタンは非表示 HTML <div class="rotate-banner"> <p id="btn-left"><img src="images/btn-left.gif
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://miracle-ysdesign.com/blog/javascript/409.html
