Bootstrap Carousel：如何在大屏幕上停止自動滑動

Question

我正在嘗試尋找一種方法來使幻燈片/輪播在屏幕達到992px或更高時停止播放（但即使用戶通常不手動操作，如果我手動減小屏幕尺寸也可以恢復工作，這也很好）它）。

因此，我嘗試了下面的代碼，但是它不起作用，並且進行了許多研究，我只是找到了在各種尺寸的屏幕上都禁用自動滑動的解決方案。

你有什么建議嗎？

function(){

    var windowIsLarge = window.matchMedia("(min-width:992px)").matches;

    if (windowIsLarge) {
        //carousel disabled
        $('.carousel').carousel({
            interval: false;
        });
    };
};

這是我更新的代碼，也不起作用。 我在那里看不到我的代碼有什么問題。

 $(document).ready(updateCarousel);

 $(window).resize(updateCarousel);


function updateCarousel() {
    var $containerWidth = $(document).width();
    if ($containerWidth <= 998) {
        $('.carousel').carousel({
            interval: 500
        });
    }
    if ($containerWidth > 998) {
        $('.carousel').carousel({
            interval: false
        });
    }
}

Answer 1

我找到了我認為相關的答案 ，請嘗試：

$(window).on('resize', function(){
      var win = $(this);
      if (win.width() > 992) { 

      $('carousel').removeClass('carousel');

      }

});

Answer 2

我認為您處在正確的軌道上，但是您需要向matchMedia添加事件偵聽器，以便它在窗口調整大小時更新。

來自： https : //www.redweb.com/agency/blog/2013/september/sensitive-performance-matchmedia

var media = window.matchMedia('(min-width:992px)');
media.addListener(function (mediaQueryList) {
  if (mediaQueryList.matches) {
    $('.carousel').carousel({
      interval: false
    });
  } else {
    $('.carousel').carousel({
      interval: 500
    });
  }
});

Answer 3

更新：

  if( $(window).width() > 992 ) {
    // disable carousel
    $('.carousel').carousel({
      interval: false,
    });
  }

Answer 4

采用

div標簽中的datainterval = "false"

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