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> |
関連記事
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...
-
-
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法
form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...
-
-
Ajaxでボタンとテキストボックス操作
ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...
-
-
FullCalendarでラベル毎に表示切替したい
Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...
-
-
jQueryでIPから位置情報の取得
jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...
-
-
ajaxを使わずに非同期っぽくsubmitする
ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...
-
-
FLASHから受信した画像をPHPで保存し、サムネイルも作る
■参考サイト ・FLASH http://www.ilovex.co.jp/bl ...
-
-
PHPで画像にロゴをつける
フォームから送られてきた画像にロゴをつけたかった。 結論としてclass.upl ...
-
-
lightboxをファイルアップロードなしで使う(CDN)方法
本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...