jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。
簡単に使えるしlightboxとかと組み合わせて使うのもいい感じ。
オプションが豊富なのもいい感じ。
ダウンロード先
http://bxslider.com/
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <title>bxsliderの実験</title> <link rel="stylesheet" href="jquery.bxslider.css" /> <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="jquery.bxslider.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('.bxslider').bxSlider({ slideWidth: 150, touchEnabled: false, slideMargin: 10, auto:true, controls: false, infiniteLoop: true, }); }); </script> </head> <body> <ul class="bxslider" id="bxslider"> <li><img src="./testimg/1.png"></li> <li><img src="./testimg/2.png"></li> <li><img src="./testimg/3.png"></li> </ul> </body> </html> |
関連記事
-
-
画像削除用function
ファイルパス、拡張子、seq番号、画像番号を渡してあげるだけ。 拡張子部分があれ ...
-
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
-
独自タグから
タグへの変換function
独自タグは##IMG1##みたいな感じ。 画像ファイル名は「ファイルパス/seq ...
-
-
jQueryで電話番号チェック
やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...
-
-
bootstrap-datetimepickerについて
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...
-
-
jQuery2.0がリリース
リリースされたとのこと。 http://blog.jquery.com/2013 ...
-
-
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
-
-
jQueryとCSSの連携
$(function(){ $("#change_small").click(f ...
-
-
Flashを用いずJavaScriptでコピー&カット機能を実装する
以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...
-
-
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...