如何仅在移动设备中停止轮播自动滑动？答案

【问题标题】：How to stop carousel auto-slide in mobile devices only?如何仅在移动设备中停止轮播自动滑动？
【发布时间】：2018-05-24 18:27:15
【问题描述】：

我正在尝试停止我的轮播以仅在移动设备上自动滑动。我试图通过 js 更改数据间隔，但由于某种原因它不起作用。知道怎么做吗？这是我的轮播的 html 代码：

<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel"> 
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#x-corp-carousel" data-slide-to="1"></li>
          <li data-target="#x-corp-carousel" data-slide-to="2"></li>
          <li data-target="#x-corp-carousel" data-slide-to="3"></li>
          <li data-target="#x-corp-carousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner index-only" role="listbox">
          <div class="item active"> <img src="img/hero-slide-2.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-3.jpg" alt="..."> 
            <!--<div class="carousel-caption">
              <h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-nighfall.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-1-thrive.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="img/hero-slide-4d.jpg" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
        </div>

        <!-- Controls --> 
      </div>
      <!-- #x-corp-carousel-->

【问题讨论】：

使用媒体查询，为具有不同冷却时间的移动设备和桌面设备设置 css 或随心所欲。 w3schools.com/cssref/css3_pr_mediaquery.asp
How to stop bootstrap carousel automatic slide in mobile的可能重复
@Mhd Alaa Alhaj 我已经尝试过了，但它对我不起作用
@Tomm 我使用媒体屏幕，但我究竟如何通过 CSS 更改数据间隔？
@EymiєlMoralєs 你可以尝试这样的事情.. 我自己从未尝试过fourfront.us/blog/jquery-window-width-and-media-queries 这会检查哪些媒体查询处于活动状态并基于此触发脚本。如果您的移动媒体查询处于活动状态，您可以使用 jquery 更改数据间隔并触发它

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

首先尝试从 html 中删除 data-ride="carousel"，然后使用一些自定义的 width，您很乐意为其禁用滑块，如下所示：（自定义 BP var 是断点）

// set breakpoint width
var BP = 900;

// start carousel
$('.carousel').carousel({ interval: (window.innerWidth<BP)?false:5000 });

// if user rotates phone orientation | window resite
$(window).on('resize', function(ev){
  if( window.innerWidth < BP ){ 
    $('.carousel').carousel({ interval: false });
  } else {
    $('.carousel').carousel({ interval: 5000 });
  }
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs"> 
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#x-corp-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#x-corp-carousel" data-slide-to="1"></li>
          <li data-target="#x-corp-carousel" data-slide-to="2"></li>
          <li data-target="#x-corp-carousel" data-slide-to="3"></li>
          <li data-target="#x-corp-carousel" data-slide-to="4"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner index-only" role="listbox">
          <div class="item active"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Revitalize Your Body and Mind Strengthen Immunity and Recover Faster </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!--<div class="carousel-caption">
              <h1> Feel Energized and Focused All Day Boost Performance and Mental Clarity </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
          <div class="item"> <img src="http://via.placeholder.com/940x480/333" alt="..."> 
            <!-- <div class="carousel-caption">
              <h1>Relax with Premium Hemp Extract Fall Asleep Faster and Wake Up Rested </h1>
            </div>--> 
          </div>
        </div>

        <!-- Controls --> 
      </div>
      <!-- #x-corp-carousel-->

【讨论】：