Queuing click events in Bootstrap 3 carousel

I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide tranitions. Here it is in its current state:

var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}
carouselDuration();
.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 1s ease-in-out;
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

It has a bug: when I click 2 bullets in rapid succession - which means clicking the second before the transition triggered by the first is finished - the transitions overlap.

Is this a Bootstrap bug or is it a bug of the above carousel?

What would be a simple and robust way to prevent this overlap bug?

Answers:

Answer

Man, you work with carousels a lot. No worries, here is the theory, first you capture the current time in milliseconds when the animation starts, now that you know each of your animations take 1 second, capture the next click event on the carousel controls item.

Now compare the delays between two events, if it's more than 1 second, (which is 1000ms) simply delay the click event on that carousel control item with setTimeout.

Check the snippet, do as many random click as possible on those controllers :

var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}
carouselDuration();

var slideStarted, slideEnded; // declare variables for storing animation start and end time, don't assing values yet.
$('#myCarousel').on('slide.bs.carousel', function() {
  slideStarted = new Date().getTime(); // capture the animation start time;
  console.log('started'); // remove this later
}).on('slid.bs.carousel', function() {
  console.log('ended'); // remove this later
});

$('.carousel-indicators').find('li').on('click', function() {
  slideEnded = new Date().getTime(); // now capture the next click time;
  if (slideEnded - slideStarted < 1000) { // compare the difference, if it's more than your desired delay which is 1 second, delay the click event calculating the value and boooooom !!!!
    console.log('early click', slideEnded - slideStarted);
    setTimeout(function() {
      $(this).click();
    }, slideEnded - slideStarted);
  }
});
.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 1s ease-in-out;
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

Answer

Here is a compromise solution: not queuing the click events, but disabling them as long as a slide transition is in progress, then enabling them between transitions:

var carouselDuration = function() {
  $.fn.carousel.Constructor.TRANSITION_DURATION = 1000;
}

carouselDuration();
// While a transition is in progress (slide event), do this
$('#myCarousel').on('slide.bs.carousel', function (e) {
    var $indicator = $(this).find('.carousel-indicators>li');
    $indicator.css('pointer-events', 'none');
});

// While a transition has finished (slid event), do this
$('#myCarousel').on('slid.bs.carousel', function (e) {
    var $indicator = $(this).find('.carousel-indicators>li');
    $indicator.css('pointer-events', 'auto');
});
.carousel.vertical {
  position: relative;
}

.carousel.vertical .carousel-inner {
  height: 100%;
  width: auto;
}

.carousel.vertical .carousel-inner>.item {
  width: auto;
  transition: 1s ease-in-out;
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.next,
.carousel.vertical .carousel-inner>.prev,
.carousel.vertical .carousel-inner>.right {
  transform: translate3d(0, 100%, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.left,
.carousel.vertical .carousel-inner>.prev.right,
.carousel.vertical .carousel-inner>.next.left,
.carousel.vertical .carousel-inner>.active {
  transform: translate3d(0, 0, 0);
  top: 0;
}

.carousel.vertical .carousel-inner>.active.right,
.carousel.vertical .carousel-inner>.active.left {
  transform: translate3d(0, -100%, 0);
  top: 0;
}

.carousel.vertical .carousel-indicators {
  display: inline-block;
  width: auto;
  padding: 0;
  margin: 0;
  left: auto;
  right: 10px;
  bottom: 2px;
  z-index: 9;
  font-size: 0;
}

.carousel.vertical .carousel-indicators li {
  border: none;
  cursor: pointer;
  display: inline-block;
  width: 18px;
  height: 18px;
  text-indent: -9999px;
  background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.carousel.vertical .carousel-indicators li.active {
  background-position: -528px -524px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div id="myCarousel" class="carousel vertical slide" data-ride="carousel" data-interval="9000">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://picsum.photos/1200/300/?gravity=east" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=south" alt="">
      </div>

      <div class="item">
        <img src="https://picsum.photos/1200/300/?gravity=west" alt="">
      </div>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
  </div>
</div>

Still looking for a queuing mechanism, as it is more natural and elegant.

Answer

I think that you should read about Carousel Events https://www.w3schools.com/booTsTrap/bootstrap_ref_js_carousel.asp

When slide.bs.carousel (start sliding) you can make the points disabled and re-enable when (slid.bs.carousel) sliding has finish

Answer

Simpelist solution is using the default callbacks i guess..

$('#myCarousel').on('slide.bs.carousel', function () { // remove click option }).on('slid.bs.carousel', function() { // add click option })

Removing the click option can be done by using a simple CSS property.

$('ol.carousel-indicators>li').css('pointer-events', 'none');

and enable it with:

$('ol.carousel-indicators>li').css('pointer-events', 'auto');

The most elegant solution is to add a class, and define the pointer-event in your stylesheet. And add/remove the class when the callbacks get triggered.

.disableClick{pointer-events:none;}

In response to the comment:

To queue click events you can use:

$(this).queue()

This saves the made clicks to a queue. More info can be found here

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.