Question

我试图找到一种方法让我的幻灯片/旋转木马在屏幕达到992px或加号时停止（但如果我手动减少我的屏幕尺寸再次恢复工作也很好，即使用户通常没有＆＃39; t do it）。

所以，我尝试了下面的代码，但它不起作用，做了很多研究，我只是找到了从各种屏幕大小禁用自动幻灯片的解决方案。

你有什么建议吗？

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

我发现this answer与我认为有关，请尝试：

$(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/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

使用

datainterval = "false"在div标签中

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

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

4 个答案: