Bootstrap Carousel：移除自動滑動

Question

我正在使用 Bootstrap 輪播。 我想要的只是 slider 只會在單擊導航或分頁時滑動。 我試過刪除

$('.carousel').carousel({
    interval: 6000
}); 

它工作正常，但我的問題是一旦我已經點擊了導航或分頁，它現在會自動滑動。 是否可以刪除自動滑動 function？ 如果是這樣，如何？

Answer 1

您可以通過 js 或 html (easist) 兩種方式執行此操作

1. 通過js

$('.carousel').carousel({
  interval: false,
});

這將使自動滑動停止，因為沒有添加毫秒，並且永遠不會滑動。

2. 通過 Html通過添加data-interval="false"並刪除data-ride="carousel"

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

變成：

<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">

根據@webMan 的評論更新

Answer 2

來自官方文檔：

間隔自動循環項目之間的延遲時間。 如果為false ，carousel 不會自動循環。

您可以使用 javascript 或使用data-interval="false"屬性傳遞此值。

Answer 3

您只需要在 DIV 標簽中再添加一個屬性，即

data-interval="false"

無需接觸JS！

Answer 4

在輪播 div 上更改/添加到 data-interval="false"

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">

Answer 5

請嘗試以下操作：

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

Answer 6

在 Bootstrap v5 中使用： data-bs-interval="false"

<div id="carouselExampleCaptions" class="carousel" data-bs-ride="carousel" data-bs-interval="false">

Answer 7

數據間隔=“假”

將此添加到相應的div ...

Answer 8

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

通過使用上面的腳本，您將能夠自動移動圖像

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

通過使用上面的腳本， auto-rotation將被阻止，因為interval為false

Answer 9

省略data-bs-ride可能會起作用。