jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
2024/05/19
画像のスライダーを作る時に便利なプラグインである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で画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...