如何僅針對大屏幕停止 Bootstrap 5 輪播自動滑動？

Question

我有來自 Bootstrap 5 的輪播，它只需要為大屏幕停止自動滑動，但對於移動版本，我需要自動滑動。 如果只能使用 html 和 css/scss，我該怎么做？

我知道data-bs-interval="false"但這也停止了移動屏幕的自動滑動。

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Answer 1

在正文末尾添加此腳本

<script>
    if(window.innerWidth > 1000){
      document.getElementById('carouselExampleControls').dataset.bsInterval = false
    }
</script>

這將在加載之前檢查窗口的大小，如果大小大於 1000，則將 data-bs-interval 設置為 false

Answer 2

您可以使用 javascript 調用interval: false 。 並且，還定義窗口寬度。 請嘗試以下javascript。

var myCarousel = document.querySelector('#carouselExampleControls')
if ($(window).width() > 991) {
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: false
})
}

Answer 3

閱讀新的BS5 輪播文檔后，它適用於調整窗口大小

$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() < 768) {
            $('#FirstBox').removeClass('active');
            $('#SecondBox').addClass('active');
            $('#ThirdBox').removeClass('active');
            document.getElementById('MyCarousel').dataset.bsInterval = 3000;
            document.getElementById('MyCarousel').dataset.bsRide = 'carousel';
            $('.carousel').carousel('cycle');
        }
        
        if ($(window).width() >= 768) {
            $('#FirstBox').addClass('active');
            $('#SecondBox').addClass('active');
            $('#ThirdBox').addClass('active');
            document.getElementById('MyCarousel').dataset.bsInterval = false;
            document.getElementById('MyCarousel').dataset.bsRide = false;
            $('.carousel').carousel('pause');
        }
    });
    $(window).trigger('resize');
});