Bootstrapカルーセルの自動スライドを無効にする方法

2024-02-16 21:34 Bootstrap カルーセル スライド

自動スライドを無効にするためには、以下の方法を試してみてください。

  1. data属性を使用する方法: カルーセルの親要素のdiv要素に data-bs-interval="false" 属性を追加します。例えば:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
  <!-- カルーセルの内容 -->
</div>
  1. JavaScriptを使用する方法: カルーセルの初期化コードで、interval オプションを false に設定します。例えば:
var myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
  interval: false
});

これらの方法を使用すると、カルーセルの自動スライドが無効になります。ユーザーが手動でスライドを操作する必要があります。

また、カルーセルに関連する他のカスタマイズも可能です。例えば、スライドの速度やエフェクト、ナビゲーションボタンの表示などを変更することもできます。

以上が、Bootstrapカルーセルの自動スライドを無効にする方法の基本的な手順です。特定の要件に応じてこれらの手法を調整して使用してください。