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

Posted 2023-05-08

【中文标题】Bootstrap Carousel：如何在大屏幕上停止自动滑动

【英文标题】：Bootstrap Carousel: How to stop auto sliding on large screen

【发布时间】：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
        );
    

【参考方案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" >