スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル - NxWorld
スライダーを切り替えたり現在何枚目なのか把握しやすいように配置されているのを見かけることが多いバレットナビゲーションを、CSSを使って見た目を整えたり動きを付けてみたサンプルです。 スライダー以外にも例えば長いシングルページでウィンドウの右側によく配置されているようなナビゲーションなどにも利用できますし、全てCSSなのでサイズやカラーなども容易に変更できます。 いずれもシンプルで凝ったものではありませんが、むしろシンプルなのでほとんどのテイストでそのまま使えたり、これをベースにオリジナルな見栄えにしていくことができると思います。 共通のHTML・CSS 以下で紹介しているサンプルでは共通のHTML・CSSとして下記がそれぞれ指定されており、CSSの場合はこの共通スタイルに各サンプルで紹介しているCSSを追記・変更などをすることで見栄えの確認ができると思います。 一部場合によっては必要ない記
【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方
今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。 この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を JavaScript を使って計算することで、古いブラウザとの互換性が高まり、より多くのデバイスで同じように表示されるようになっています。 最新のブラウザはもちろん、IE8、IE9、IE10 にも対応していますね。 また画像が切り替わるときのエフェクトの一部を jQuery UI に依存させることで、本体の［Juicy Slider］の容量を軽く抑えています。 以下［Juicy Slider］の設置方法です。 必要なファイルをダウンロード 使用するファイル一式は公式サイトからダウンロードしてきます。 Juicy Slider : http://redslim.
ブラウザの幅全体をメイングラフィックにするスライドショーを作成する【jQuery連載11】 | HTML5でサイトをつくろう
前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
Appleの商品スライダーを再現したjQueryプラグイン「Kiwi-slider」
Posted: 2014.10.28 / Category: javascript / Tag: jQuery 「Kiwi-slider」はAppleの商品ページのスライダー動作を再現したjQueryプラグインです。 プラグインのダウンロードと準備 デモ＆ダウンロードは下記から Kiwi-slider html & css ダウンロードした「kiwi.css」「kiwi-slider.js」を読み込んだら、後述するidを「new KiwiSlider」で指定します。 html <link rel="stylesheet" type="text/css" href="stylesheets/kiwi.css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="javascrip
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
Glide.js
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
[JS]複数のコンテンツをドラッグ・スワイプでスライド表示するスクリプト -Minimit Gallery
1ページで構成された複数のコンテンツをデスクトップのドラッグ、スマフォ・タブレットのスワイプ操作でスライドして表示する単体で動作するスクリプトを紹介します。 Minimit Gallery Minimit Gallery -GitHub Minimit Galleryのデモ Minimit Galleryの使い方 Minimit Galleryのデモ Minimit Galleryは一つのHTMLファイル内に配置した複数のコンテンツをスライドで次々に表示するスクリプトで、各コンテンツはハッシュリンクでの表示にも対応しています。 デモはIE7+, Firefox 3.5+, Safari 3+, Opera 9+, Chrome, iPhone, iPad, Android, Windows Phoneなどでご覧ください。 デスクトップでデモを表示してみます。 次コンテンツへスライド中 上部
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」:phpspot開発日誌
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 2013年05月02日- PhotoCradle.js. An elegant wrap of your photo collection. 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」。 次へ、前へでどんな画像が表示されるのか気になりますが、予めポップアップで表示してくれる親切なスライダーを実装できます。 更に、画像下に表示されているサムネイルにカーソルを合わせると、他の前後の画像がうっすら表示されます。 何度もボタンを押して切り替えるよりもカーソルを合わせるとより多くの画像が一覧できるというのはなかなか便利そう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maski
マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」:phpspot開発日誌
Maskify Slider demos マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」。 画像をマスクでくりぬいて更にその中身の画像を切り替えられるというものです。 元画像 繰り抜き 繰り抜いたり、重ねたり、応用することで様々なことができそうですね 関連エントリ パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 タッチ可能でレスポンシブなスライダー実装「RoyalSlider」 これは新しい円形のスライダーが実装できる「Tiny Cir
パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」:phpspot開発日誌
FractionSlider: jQuery parallax Slider Plugin | jacksbox.design パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 最近よく見る縦スクロールするとパララックス効果、ではなく横にスライドしてアニメーションっぽいスライダーが作れるプラグインです 単なる画像をペラペラ紙芝居っぽくめくるのではなくて、よりアニメっぽい表現が可能です。 <div>をリストにして定義し、中身を記述していけば作れるようです Flashでやってたようなことも、どんどん置き換わっていますね 関連エントリ ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 軽量のスワイプ可
jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 | Stronghold Archive
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」:phpspot開発日誌
ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」 2013年02月12日- Overview - jQuery Rondell ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」。 次のように、カルーセルやスライダー等、様々な画像ギャラリーのUIを実現することができます。 多機能だけじゃなくて、カッコいいところもいいです。サンプルサイトがBootstrapベースですが、Bootstrapベースのサイトに入れても違和感なく埋め込めるでしょう。 カルーセル スライダー スクローラー サムネイル付きギャラリー。動きもいい感じ 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン サムネイルがシャッフルされてク
スライダー、ツールチップの他多種多様な機能が詰まった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
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。 | Stronghold Archive
【bxslider】レスポンシブデザイン対応版の記事はこちら アップデートによりレスポンシブデザイン対応版に変更されていましたので、改めてメモとして記事にまとめております。CSS3のアニメーションを組み込んでスライドがさらにスムーズな動作になっています。※レスポンシブ版の方はイージングの選択の幅が狭い事やIE6が非対応だったり等、若干の癖がありますので、こちらで記事化したバージョンと使い分ける事をオススメします。 設置方法 > DEMO > DOWLOAD 設置方法も非常にシンプルです。プラグインを読み込みdivやliの階層を書くだけ。 プラグインのダウンロードは本家サイトより行えます。 <script src="js/jquery.1.X.X.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src
[JS]jQueryのプラグイン33+1選 -2012年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 videoBG 動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。 Superslides フル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow
[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月