CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Chenius
Chenius

Reputation: 131

individual data intervals bootstrap carousel 4

I want to set an individual data interval for each slide on my bootstrap 4 carousel. I have tried a few other snippets of javascript, however they don't seem to work with my code, such as Bootstrap 4 Carousel-stack overflow

Could anyone please suggest something, any help is appreciated.

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}
.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
   Testimonial 1
    </div>
    <div class="carousel-item">
     Testimonial 2
    </div>
    <div class="carousel-item">
     Testimonial 3
    </div>
  </div>
  </div>

Upvotes: 1

Views: 1306

Answers (1)

Shidersz
Shidersz

Reputation: 17190

I have made an implementation based on the Zim's answers from this: Bootstrap 4 Carousel: Individual data-interval on each slide, and it is working good, except for the start point of the carousel (i.e. the first slide uses the default interval on the first iteration). For use this extension, you have to add the data-interval attribute to each carousel-item setting on it the milliseconds of the interval. Check next example:

$(document).ready(function()
{
    // Extend the Bootstrap carousel implementation.

    $.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
            );
        }
    };
});
#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

Alternatively, in case the previous don't work, you can wrap the code inside <script> and </script> tags after the including of the Bootstrap files, like this:

#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.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
        );
    }
};
</script>

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

Update for support to multiple carousels

The next example shows how to do a correct implementation for support multiple carousels. Basically we need to use next line when selecting the item:

var item = $(this._element).find('.carousel-item-next');


#top-bootstrap-slider{
    width: 80%;
    margin: auto;
    background: rgb(15,36,62);
    color: white;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    font-size: 10px;
}

#top-bootstrap-slider2{
    width: 80%;
    margin: auto;
    background: skyblue;
    color: white;
    height: 50px;
    margin-top: 25px;
    overflow: hidden;
    font-size: 14px;
}

.carousel-item{
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 3vw;
    text-align: center;
    width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script>
$.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)
    {
        // This next line does the trick.
        var item = $(this._element).find('.carousel-item-next');
        var newInterval = item.data('interval') || this._config.interval;

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

<div id="top-bootstrap-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="1000">
      Testimonial 1
    </div>
    <div class="carousel-item" data-interval="2000">
      Testimonial 2
    </div>
    <div class="carousel-item" data-interval="5000">
      Testimonial 3
    </div>
  </div>
</div>

<div id="top-bootstrap-slider2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="3000">
      Testimonial 4
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 5
    </div>
    <div class="carousel-item" data-interval="1000">
      Testimonial 6
    </div>
  </div>
</div>

Upvotes: 1

Related Questions