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の指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...
-
-
classの取り扱い
jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...
-
-
jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方
divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...
-
-
他サイトのRSS情報を画像付きで表示させる
WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...
-
-
配列をjQueryで取り扱う
やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...
-
-
jQueryでIPから位置情報の取得
jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
chardin.jsを利用して注釈を入れる
簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...
-
-
safariのみスクロール関連のイベントが発火しない
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...