HOME > ライブラリ > jQuery slider jQuery slider 画像のスライドではなく要素のスライドなのでコンテンツのカスタマイズがやりやすい。 (imageの中には何も入れられないけどdivの中にはなんでも入れられる的な) MIT Licenseでソースも小さくわかりやすいので、オプションでダメならソースをいじることもできそうな感じ。 使い方 jQuery本体とjquery.slider.min.js、jquery.slider.cssが必要となります。
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
とあるサイトの改修にて以下のエラーが発生 モダンブラウザ、ie8でのチェックはOKだったのだが、IE9のみ SCRIPT438: オブジェクトは ‘getElementsByTagName’ プロパティまたはメソッドをサポートしていません。 どうやら利用しているjqueryのバージョンが1.5でIE9と相性が非常に悪いらしい。 しかしすでに稼働しているサイトなので、jqueryのバージョンを上げるのもリスクが高い いろいろ調べていると、互換モードで表示すると上記のエラーが発生しないという記事を発見。 試しにアイコンをクリックしてみると正常に表示された。。。 ということで、IE9で見たときは強制的に互換モードで表示させるよう以下のタグをhtmlに記述 <meta http-equiv=”X-UA-Compatible” content=”IE=emulateIE8″ /> これで無事に解決!
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用の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」を使ってみました。機能もかなり充実していて、スピードの調整はもちろん、多彩なエフェクトが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"
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く