I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions.
I want to prevent slide transitions from overlapping when the bullets are clicked in random order and rapid succession.
I came up with this solution that relies on 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, I am looking for a queuing mechanism, as it is more natural and elegant.