Bootstrap Carousel: Как остановить автоматическое скольжение на большом экране

Question

Я пытаюсь найти способ заставить мой слайд / карусель останавливаться, когда экран достигает 992 пикселей или больше (но также было бы хорошо, если бы он снова заработал, если я вручную уменьшу размер экрана, даже если пользователь обычно этого не делает.не делаю).

Итак, я попробовал приведенный ниже код, но он не работает, и во многих исследованиях я просто нахожу решения, которые отключают автоматическое скольжение на экране любого размера.

Есть ли у вас предложения?

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

использовать

datainterval = "false" в теге div

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

Answer 2

Я думаю, вы на правильном пути, но вам нужно добавить прослушиватель событий в matchMedia, чтобы он обновлялся по мере изменения размера окна.

От: https://www.redweb.com/agency/blog/2013/september/responsive-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

Я нашел этот ответ , который, я думаю, относится, попробуйте:

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

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

      }

});