Adjusting the time intervals for each slide in real-time

Question

Adjusting the time intervals for each slide in real-time

I have a project where I need to adjust the time interval for each individual slide in my carousel in real-time using basic form inputs.

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

I found a helpful link on how to achieve this: 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);
     }
};

My carousel is now working with different intervals for each slide, which is great.

However, I am facing an issue with changing intervals after the carousel has been initialized. Any suggestions or solutions would be greatly appreciated.

Thank you!

EDIT

Update: The problem was due to my outdated version of Bootstrap...

javascript twitter-bootstrap bootstrap-4

Answer 1

Answer №1

There is a way to adjust the timing using the data-interval tag attribute. Here is an example snippet:

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>

Answer 2

There is a way to adjust the timing using the data-interval tag attribute. Here is an example snippet:

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>

Adjusting the time intervals for each slide in real-time

Answer №1

Similar questions

Passing a state object in a POST request body, only to find it arriving empty at the Express server

Bower fails to add components during installation

Import objects into THREE.js using OBJLoader, convert to Geometry, apply transformations, and finally convert to BufferGeometry

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

Button Type Comparison: Click Event vs Submit Event

Expanding/Collapsing Indicator Stays in Place as Content Expands

Maxlength and Minlength attributes are not considered when using input type=“number”

Is there a way to transform a regular timestamp into a BSON timestamp format?

select dropdown in bootstrap is experiencing issues with onchange functionality

Display an AJAX div when the image is hovered over and have it track the movement of

Waiting for the result of an AngularJS promise

The Veux Store is throwing an error message that says "Array is

Safari is not properly handling element IDs when used in conjunction with React

Maintaining text color while adding a color overlay to a Bootstrap Jumbotron

AngularJS showcases the full spectrum of available methods

Tips for resolving issues with dropdown menu placement

Ways to resolve the issue of columns having unequal heights in Bootstrap

Steps to submit a JavaScript-generated output as the value in a form input field

Can one utilize Javascript to write in plain text format?

Attempting to create a table structure with rows and cells dynamically within CoffeeScript utilizing the Google Closure Library