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

【问题标题】：Bootstrap Carousel: How to stop auto sliding on large screenBootstrap Carousel：如何在大屏幕上停止自动滑动
【发布时间】：2018-11-03 23:30:48
【问题描述】：

我正在尝试找到一种方法让我的幻灯片/轮播在屏幕达到 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
        });
    }
}

【问题讨论】：

标签： javascript jquery twitter-bootstrap carousel

【解决方案1】：

我找到了我认为相关的this answer，试试：

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

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

      }

});

【讨论】：

嗨！我不确定这个逻辑是否有效，因为如果我从具有类“carousel”的 div 中删除类“carousel”，如果用户调整窗口大小，我将无法重新放置类再次。但它让我想到了在 ID 中应用此更改，这是可能的，我会尝试，谢谢！

【解决方案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
    });
  }
});

【讨论】：

逻辑看起来很不错，但不知什么原因没用，我试着去掉“;”在错误之后，但它也没有工作..
哦，是的，那不应该在那里。可能有一种特殊的引导方法可以在轮播初始化后更新此类属性。
条件完美地像这样工作： if ($containerWidth 998) { $('.carousel').carousel({ interval: 2000 });但是，当我更改窗口宽度时，它们不会被触发。
这是一个有人制作的代码笔，展示了它如何随着窗口宽度的变化而更新。我将更新我的答案以反映他们所拥有的。 codepen.io/mattdsteele/pen/FmLva
谢谢你，我会测试你的建议。我还用更完整的代码编辑了我的答案，但是它还没有工作

【解决方案3】：

更新：

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

【讨论】：

应该能用但不能用，主要问题是触发器
也许可以试试$(".carousel").carousel('pause');
查看更新，我在FF和Chrome上测试过，你只需要重新加载页面。

【解决方案4】：

使用

datainterval = "false" 在 div 标签中

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

【讨论】：