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」とかいう記述があ ...
-
-
ローディングアイコンの自動生成
オートページャーを作成中にローディングしている アイコンが必要になったのでメモ。 ...
-
-
Ajaxで負荷軽減
業務中、専用のページでfile_get_contents的なものは あまり使わな ...
-
-
faviconの取得と生成
AというサイトのfaviconをBというサイトで使いたかった。 ただ、favic ...
-
-
jQueryで画像(
タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...
-
-
submit関連のjQuery
<?php //jQueryでのsubmit,エンターキーでのsubmit ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
PHPで画像を上下反転させ保存する
やりたかった事は、下記の通り。 ・既にフォルダに保存されている画像を上下反転させ ...
-
-
smart_resize_imageで縦横の比率関係なく、固定リサイズ
PHPで縦横どちらかが指定の長さを超えた場合、比率を保ったままリサイズで使ったs ...
-
-
imgタグで作成したグラフをjQueryでリアルタイムに動かす
このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...