Question

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

<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 ...

Answer 1

看起来您可以使用data-interval标签属性并以此方式操作时间。参见下面的代码段

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>

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

1 个答案: