Queuing click events in Bootstrap 3 carousel

[Ajax30]

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();

CSS:

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

HTML:

    

      

        
        

          

            
          

          

            
          

          

            
          
        </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?

[Author]

Posts