スライダーのプラグイン・bxSliderを実装する | FSFIELD Labs
JavaScript スライダーのプラグイン・bxSliderを実装する スライダーのプラグイン・bxSliderの実装方法を紹介します。 bxSliderは、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるカルーセルタイプのスライダーです。 カルーセルとはメリーゴーランドのことで、スライドをしていくと一周して元のスライドに戻ることからきています。 格納するファイル jquery.js jquery.easing.js jquery.bxSlider.js 記述の仕方 head要素の記述 <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.easing.js"></script> <script type="t
jQuery Content Slider | Responsive jQuery Slider | bxSlider
$('.bxslider').bxSlider({ video: true, useCSS: false }); <!-- <script src="/js/plugins/jquery.fitvids.js"></script> must be included in the <head> after the jQuery library, and before the jquery.bxslider.js file. See the source code of this page for an example. --> <ul class="bxslider"> <li> <iframe src="http://player.vimeo.com/video/17914974" width="500" height="281" frameborder="0" webkitAllowFu
jQueryでスライダーをスワイプ
jQueryプラグインで実装できるスライダーにスワイプ機能（スマホ対応）の追加をしました。 利用したのは下記プラグイン jQuery Slider2 スライダー機能を実装します。実際動いているスライダー内の download ボタンからダウンロード。 TouchSwipe スワイプ機能の実装。Latest TouchSwipe on github download からダウンロード。 【html header】 jquery本体と、DLした3つのcssとjsを読み込みます。 <link rel="stylesheet" href="jquery.slider.css"> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.s
IE9で強制的に互換表示する
とあるサイトの改修にて以下のエラーが発生 モダンブラウザ、ie8でのチェックはOKだったのだが、IE9のみ SCRIPT438: オブジェクトは ‘getElementsByTagName’ プロパティまたはメソッドをサポートしていません。 どうやら利用しているjqueryのバージョンが1.5でIE9と相性が非常に悪いらしい。 しかしすでに稼働しているサイトなので、jqueryのバージョンを上げるのもリスクが高い いろいろ調べていると、互換モードで表示すると上記のエラーが発生しないという記事を発見。 試しにアイコンをクリックしてみると正常に表示された。。。 ということで、IE9で見たときは強制的に互換モードで表示させるよう以下のタグをhtmlに記述 <meta http-equiv=”X-UA-Compatible” content=”IE=emulateIE8″ /> これで無事に解決！
[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。 約4KBと超軽量なのもいいですね。 右上のオートプレイは状況も表示します。 Orbitの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.orbit.min.js" type="text/javascript"></script> スタイルシートも外部ファイルとして指定します。 <link rel="stylesheet" href="css/orbit.css"> HTML 画像のみを配置したシンプルなスライドのHTMLです。 <div id="featured"
レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い方 – bl6.jp
レスポンシブにも対応している人気のjQueryプラグイン「Nivo Slider」を使ってみました。機能もかなり充実していて、スピードの調整はもちろん、多彩なエフェクトがWebサイトを魅力的にしてくれること間違いなしです。スライドショーでインパクトを出したい場合にはとても有効かと思います。ということで以下使い方です。 [ads_center] 実装してみる 基本的にはシンプルに実装することができます。特にオプションも指定しない場合の簡単な使い方です。jQuery本体とダウンロードしたプラグインをhead内に読み込みます。 <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> <link rel="stylesheet" href="nivo-slider.css"
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる – bl6.jp
とても簡単かつ軽量なjQueryのスライダー「jQuery Slider²」を使ってみました。使いやすくて、サクっと実装できます。オプションで幅や高さも指定できますし、スピード、自動スライドも切り替えられ、それなりの機能もつけられるのでいい感じかと思います。以下、サンプルと使い方です。 [ads_center] 使い方 以下のサイトからダウンロードできます。 jQuery Slider² – Make your site slide – wex.im いつも通り、head内にjQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascrip
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQueryプラグインなスライダー | かえラボBlog
jQueryプラグインにチャレンジしてみました。 よくあるスライダーです。 (10/26 追記) iPhone&iPad対応しました。 細かいことはCSSで調整ください (9/7 追記) ドラッグに対応しました。 slider.js Demo HTML側の記述は下記を参考ください。 <div class="slideFrame"> <ul class="slideGuide" id="slide-00"> <li class="slideCell">セル</li> <li class="slideCell">セル</li> </ul> <div class="slideCtrl left"><</div> <div class="slideCtrl right">></div> </div> リスト要素の部分はdiv要素など他のブロック要素でも構いません。 ガイド用クラス(.slide
様々な3Dエフェクトアニメーションでのコンテンツスライダーを実装できるjQueryプラグイン「Adaptor::jQuery content slider」｜BLACKFLAG
jQueryを使ってのコンテンツスライダーを実装するプラグインは多々ありますが jQueryとCSS3での3Dアニメーションでスムーズな切り替えを簡単に実装できる 「Adaptor::jQuery content slider」がいろいろと参考になりそうだったので 自分用メモとして紹介してみます。 Adaptor :: jQuery content slider Adaptor, an extensible jQuery content slider | Phil Parsons デモページはこちら 使い方もとても簡単。 HTMLでは切り替える一つ一つのコンテンツ要素は ＜figure＞タグで制御しているようです。 ※プラグインページのチュートリアル参照 ◆HTML <div class="slider-viewport"><!-- works as a viewport for the
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery slider | ライブラリ | KANTENNA.COM
https://motoshige.net/archives/3040