jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dev7studios
