jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
2024/01/12
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるしlightboxとかと組み合わせて使うのもいい感じ。オプションが豊富なのもいい感じ。以下に利用方法のメモ。
ダウンロード先
CDNを使う場合は以下を参照。
https://cdnjs.com/libraries/bxslider
サンプル
https://taitan916.info/sample/bxslider/
ソース
<html> <head> <title>bxsliderの実験</title> </head> <body> <ul class="bxslider" id="bxslider"> <li><img src="001.jpg"></li> <li><img src="002.jpg"></li> <li><img src="003.jpg"></li> </ul> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/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> </body> </html>
関連記事
jQueryで画像を遅延ロードする(jquery.lazyload.js)
画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
jquery.snipeの使い方
使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
jQueryで画像(タグ内)のsrc情報を取得する場合
すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...