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 Alert Dialogsで表示後に処理したい
最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...
-
-
jQueryでチェックボックスの全チェック&チェック解除
フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...
-
-
jQueryプラグイン使用時の注意
最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
独自タグを変換して画像を表示させる
やりたい事↓↓ ----- {$IMG1}～{$IMG5}までの独自タグがある。 ...
-
-
lightboxで画像拡大時に文字タイトルとリンクをつける
lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...
-
-
jQueryの指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...
-
-
画像拡張子の違いについて
jpg/gif/png画像についてGIFはアニメーションが出来る、 ぐらいの知識 ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...