スマートフォンに。マルチデバイス対応のjQueryイメージスライダー | 海外のホームページ作成＆進出支援の株式会社メディアウェイブ
デザイナーの植村です。 レスポンシブWebデザインが叫ばれている昨今ですが、 その手法の一つにCSS3のMedia Queriesがあります。 簡単に言えば、ウィンドウサイズによってレイアウトを変更し、 マルチデバイス対応とする技術です。 PC用とスマートフォン用、 別々にサイトを用意する必要がないのが最大のメリットです。 そんなMedia Queriesですが、スマートフォンなど画面の小さなデバイスで 閲覧することを考慮しながらデザインする必要があるため、 あまり凝ったデザインには向いてません。 既存のjQuery(イメージスライダー等)が使いにくかったり ちょっとデザインに制約が出てくるんですね。 そこで今回紹介するのは、iPhoneやiPadのような小さいウィンドウサイズでも 大きさを自動で調整してくれるjQueryのイメージスライダーです。 Media Queriesとうまく併用す
jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法 – bl6.jp
すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探している人なんかにはまさにといった感じかと思います。その名もFLEXSLIDER。しかも軽量なのがうれしいです。とても有名みたいですが自分は最近知りました…。以下、簡単な使い方です。 [ads_center] FLEXSLIDERの使い方 まずは下記サイトよりダウンロードします。 FlexSlider – The Best Responsive jQuery Slider head内でjQueryとプラグイン、そしてCSSを読み込みます。 <link rel="stylesheet" href="flexslider.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><
レスポンシブなコンテンツスライダー「FLEXSLIDER」jQueryプラグインの使い方とサンプル
FLEXSLIDERは、レスポンシブなコンテンツスライダーjQueryプラグインです。オプションの指定で縦方向へのスライドやマウスホイールでスライドするようにもできます。 オプションが沢山用意されているので、色々な表示の仕方ができそうです。ブラウザはSafari 4、Chromeの4 +、Firefox 3.6 +、Operaは10 +、IE7 +。 iOSとAndroidデバイスがサポートされているようです。 IE6で表示確認しようとしたら永遠に読み込みが終わらなくて、エラーで終了という形になりました。IE6だとページが全く見れなくなってしまうようです。（Adobe BrowserLabとIETSTERで確認しました。） ダウンロードとデモ デモとダウンロード→FlexSlider – The Best Responsive jQuery Slider ダウンロードできるファイルにデモフ
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
puzzel.jp
ユーザー目線でのデザインが得意で、プロダクトの成長をより加速させるためのデザインも得意です。 toC ユーザー向けのプロダクトのデザインを注力していましたが直近は、toB ユーザー向けのプロダクトのデザインに注力しています。 他、ロゴや Web サイトデザイン/マークアップ、写真撮影、映像撮影・編集、デザインの講師など。 自己紹介 (note) About - puzzel.jp 2010年10月からスタートした、puzzel.jp。 開設時から1つまえのサイトが残っています。 デザイントレンドによって変わっていたり、ガラケー対応のサイトだったりと、時代を感じることができます。 History: 2010, 2011, 2012, 2013, 2014, 2016, 2020 Chompy, Inc. 2021 - 2023 フードデリバリーサービス Chompy の UI / UX デザ
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」:phpspot開発日誌
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル＋ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ
[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <a title="" href="#" class="next"></a> </div> JavaScript <script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Content Slider | Responsive jQuery Slider | bxSlider