Tag : スライド

READ MORE

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応さ…

READ MORE

先日ここでレスポンシブ対応のスライドショーの試作品として「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題してjQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを紹介しましたが、操作面に関してフリック操作には対応していなかったので、メイン部分に…

READ MORE

以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますがやはり今後はサイト上に設置するスライドショー関連もレスポンシブに対応している必要が出てくることは必至なので試しに作ってみたのを紹介してみます。jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法今回のレスポン…

READ MORE

jQueryを使ってのコンテンツスライダーや画像スライドショーなどを出来るだけシンプルなスクリプトでに実装する実験やサンプルをいくつか紹介してきていますが最近よく見かける(流行り?)ブラウザウィンドウ画面の幅をめいっぱい使ってコンテンツ要素をスライドさせて魅せるコンテンツスライダーをまだ試したことがなかったので実験的に…

READ MORE

今ではあちこちで見かけるようになったWebページでの背景全体の画像フルスクリーン表示。単純に一枚の画像を表示するパターンや複数画像を切り替えて背景でフルスクリーンスライドショーにしたりランダムで表示する画像を切り替えたりなどなど、魅せ方はさまざまですが、これらをjQueryを使ってできるだけシンプルなスクリプトで実装が…

READ MORE

先日「jQueryでリキッド対応のカルーセルUIを作成する実験」と題して、ブラウザのサイズによって可変するリキッドカルーセルパネルUIの実装方法を紹介しましたがその動作に自動でスライドする機能を追加したパターンを作成してみたので紹介してみます。まずは動作サンプルから。jQueryでリキッドカルーセルUIに自動スライド機…

READ MORE

今までここでカルーセルパネルUIを実装するサンプルをいくつか紹介していますが、amazonのサイトでも使われているような、ブラウザ枠のサイズによってカルーセルに表示する個数を変化させるリキッド対応のカルーセルパネルを試しに作ってみたので紹介してみます。まずは動作サンプルから。jQueryでリキッド対応のカルーセルUIを…

READ MORE

前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作するフリック/スワイプ動作UIをjQueryで実装する方法を紹介しましたが、前回の単純なフリック/スワイプのUI動作に加えて、自動で次の画像に切り替わるスライドショー動作とメインビジュアル部分にNEXT/BACKのボタンを追加したパターンでの画…

READ MORE

iPhoneやiPad、Androidといったスマートフォンやタブレット端末ではフリック/スワイプと呼ばれる指でスライドさせるUIが付き物になっています。jQueryでもこのフリック/スワイプ動作を実装できるプラグインはたくさんありますがいざ自分で作ろうとすると意外と大変な動作だったりします。この動作についていろいろ調…

READ MORE

先日、とある案件で必要になり、jQueryを使って作成した、コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。まずは動作のサンプルから。jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシン…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner