レスポンシブ対応のjQueryプラグイン「Glide.js」スライドショー
スマートフォンやタブレット端末のスワイプにも対応し、かつレスポンシブなスライドショーが実現できるjQueryプラグイン「Glide.js」をご紹介します。横幅100%のイメージスライドショーを手軽に実装できるので使いやすいです。 Glide.js デモサンプル1 デモサンプル2 【使い方】 まずは、GitHubよりGride.js一式をダウンロードします。 1.jQueryとGlide.js、style.cssを読み込む <header>内に「jQuery本体」と、「glide.js」、「style.css」を読み込みます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jquery.glide.js"></script> <link rel="stylesheet"
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」:phpspot開発日誌
Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
