每张幻灯片的实时间隔修改答案

【问题标题】：Real Time interval modification for each slides每张幻灯片的实时间隔修改
【发布时间】：2019-11-06 05:04:05
【问题描述】：

对于一个项目，我想（实时）修改轮播中的每个幻灯片间隔（单独），并使用一些基本的表单输入。

<input type="number" id="slide1">

我点击这个链接：individual data intervals bootstrap carousel 4

$.fn.carousel.Constructor.prototype.cycle = function (event)
{
    if (!event)
        this._isPaused = false;

    if (this._interval)
    {
        clearInterval(this._interval);
        this._interval = null;
    }

    if (this._config.interval && !this._isPaused)
    {
        var item = $('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

        this._interval = setInterval(
        (document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
        newInterval);
     }
};

在我不同的时间间隔内一切正常。

但是现在...轮播初始化后无法更改间隔。

有什么想法吗？

提前谢谢你。

编辑

问题出在我的旧版 Bootstrap...

【问题讨论】：

初始化后更改轮播时，需要将当前轮播处理掉，并使用新选项https://getbootstrap.com/docs/4.3/components/carousel/#carouseldispose重新初始化轮播
谢谢，但我不太明白该怎么做。你有什么例子吗？

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

看起来您可以使用data-interval 标签属性并以这种方式操纵时间。见下面的sn-p

function formCheck(e) {
  e.preventDefault;
  let $slide1 = $("#durSlide1").val();
  if ($slide1 > 0) {
    $("#slide1").attr("data-interval", $slide1 * 1000);
  } else {
    $("#slide1").removeAttr("data-interval");
  }
  let $slide2 = $("#durSlide2").val();
  if ($slide2 > 0) {
    $("#slide2").attr("data-interval", $slide2 * 1000);
  } else {
    $("#slide2").removeAttr("data-interval");
  }
  let $slide3 = $("#durSlide3").val();
  if ($slide3 > 0) {
    $("#slide3").attr("data-interval", $slide3 * 1000);
  } else {
    $("#slide3").removeAttr("data-interval");
  }
  $(".carousel").carousel("next");
}

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <form>
    <div class="form-row mx-3">
      <div class="column">
        <input id="durSlide1" name="durSlide1" class="form-control form-control-sm" placeholder="Duration for Slide #1">
      </div>
      <div class="column">
        <input id="durSlide2" name="durSlide2" class="form-control form-control-sm" placeholder="Duration for Slide #2">
      </div>
      <div class="column">
        <input id="durSlide3" name="durSlide3" class="form-control form-control-sm" placeholder="Duration for Slide #3">
      </div>
      <button type="button" onclick="formCheck(event)" class="btn btn-sm btn-primary">Submit</button>
    </div>
  </form>
  <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div id="slide1" class="carousel-item active" data-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
        <title>Placeholder</title>
        <rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#fff" dy=".3em">First slide</text></svg>
      </div>
      <div id="slide2" class="carousel-item" data-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
        <title>Placeholder</title>
        <rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#fff" dy=".3em">Second slide</text></svg>
      </div>
      <div id="slide3" class="carousel-item" data-interval="2000">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
        <rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#fff" dy=".3em">Third slide</text>
        </svg>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>

【讨论】：

谢谢。但是，这仅在前 2 张幻灯片中有效，在此之后，如果我更改间隔，新值会出现但不起作用...
我在第一个sn-p代码上贴了一个错误，第三张幻灯片使用了输入框2的值。我已在发布代码后的几分钟内更正了该问题，但您可能仍在运行旧代码。尝试在浏览器上进行硬刷新并再次运行 sn-p。另外，你用的是什么浏览器？