使用 data-interval="false" 防止 twitter 引导轮播自动滑动不起作用

Posted 2023-05-08

【中文标题】使用 data-interval="false" 防止 twitter 引导轮播自动滑动不起作用

【英文标题】：Preventing twitter bootstrap carousel autosliding using data-interval="false" does not working

【发布时间】：2015-02-02 03:35:30

【问题描述】：

我有以下引导 3 轮播：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
  <span style="margin-left: -7px;px;color:#C0BEBE;font-size: 25px;" data-target="#carousel-example-generic" data-slide-to="0" class="active">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i>
      1
    </span>
  </span>
  <span style="margin-left: -7px;px;color:#C0BEBE;font-size: 25px;" data-target="#carousel-example-generic" data-slide-to="1">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i>
      2
    </span>
  </span>
  <span style="margin-left: -7px;px;color:#C0BEBE;font-size: 25px;"  data-target="#carousel-example-generic" data-slide-to="2">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i>
      3
    </span>
  </span>
  <span style="margin-left: -7px;px;color:#C0BEBE;font-size: 25px;"  data-target="#carousel-example-generic" data-slide-to="3">
    <span class="fa-stack fa-lg">
      <i class="fa fa-circle-thin fa-stack-2x"></i>
      4
    </span>
  </span>
  <!-- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li> -->
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">

    <div class="carousel-caption">
      ...
    </div>
  </div>
  <div class="item">

    <div class="carousel-caption">
      ...
    </div>
  </div>
  <div class="item">

    <div class="carousel-caption">
      ...
    </div>
  </div>
  <div class="item">

    <div class="carousel-caption">
      ...
    </div>
  </div>
</div>

如您所见，我有 data-interval="false" 但我的旋转木马总是自动滑动，我希望只有当用户按下数字 1、2、3 o 4 的按钮时才能改变幻灯片，但我可以做到停下来。

我也试试：

$('.carousel').carousel(
    interval: false,
    wrap: true,
    pause: true,
);

$('.carousel').carousel(
    interval: false,
);

$('.carousel').carousel(
    pause: true,
);

$('.carousel').carousel(
    interval: false,
    pause: true,
);

我检查了我的 webinspector，没有任何 javascript 错误。

【参考方案1】：

你的标记是错误的

从您的标记中删除 data-ride="carousel"

【讨论】：

谢谢，我已经试过了，但还是不行。但是我删除了类轮播并且它可以工作，所以谢谢你的想法