how to synchronize two carousel slider - Twitter Bootstrap

Question

I have two sliders (twitter bootstrap 3.3.6) on one page. Both should be activated via the same control-elements. When activated through the keyboard arrow-keys - very fast clicks -, I am losing the synchronization; Especially in Firefox (v 49.0.1). That means the image in the header-slider does not belong to the text in the content-slider.

How can I realize, that the slider is only activated when the animation of both sliders has finished?

I have already tried with jQuery-promise(), But the error stays the same.

Thanks for any help.

 $(document).ready(function() { $('#sliderHeader, #sliderPartner').carousel({ interval: false }) $('#sliderPartner a.left').click(function(event) { event.stopPropagation(); $(".carousel").promise().done(function() { $('#sliderHeader').carousel('prev'); $('#sliderPartner').carousel('prev'); }); }); $('#sliderPartner a.right').click(function(event) { event.stopPropagation(); $(".carousel").promise().done(function() { $('#sliderHeader').carousel('next'); $('#sliderPartner').carousel('next'); }); }); $('#sliderPartner .carousel-indicators li').click(function(event) { event.stopPropagation(); var indicatorNumber = $(this).attr('data-slide-to'); $('#sliderHeader').carousel(parseInt(indicatorNumber)); $('#sliderPartner').carousel(parseInt(indicatorNumber)); }); $("body").keyup(function(e) { e.stopPropagation(); if (e.keyCode == 37) { // left $('#sliderPartner a.left').trigger('click'); } else if (e.keyCode == 39) { // right $('#sliderPartner a.right').trigger('click'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Twitter Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <header> <div id="sliderHeader" class="carousel slide"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> image0 </div> <div class="item"> image1 </div> <div class="item"> image2 </div> <div class="item"> image3 </div> <div class="item"> image4 </div> </div> </div> </header> <section> <div class="row"> <div class="col-md-12"> <div id="sliderPartner" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#sliderPartner" data-slide-to="0" class="active"></li> <li data-target="#sliderPartner" data-slide-to="1"></li> <li data-target="#sliderPartner" data-slide-to="2"></li> <li data-target="#sliderPartner" data-slide-to="3"></li> <li data-target="#sliderPartner" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <p>Content0</p> </div> <div class="item"> <p>Content1</p> </div> <div class="item"> <p>Content2</p> </div> <div class="item"> <p>Content3</p> </div> <div class="item"> <p>Content4</p> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#sliderPartner" role="button" data-slide="prev"> <span class="glyphicon icon-prev" aria-hidden="true"></span> <span class="sr-only">Zurück</span> </a> <a class="right carousel-control" href="#sliderPartner" role="button" data-slide="next"> <span class="glyphicon icon-next" aria-hidden="true"></span> <span class="sr-only">Vor</span> </a> </div> </div> </div> </section> 

Answer 1

Why not have a global variable keeping track of what page you're on.

$(() => {
    const MAX_PAGE = 10 // or however many pages
    let pageNum = 0

    goToPage = (newPage) => {
        pageNum = Math.max(0, (Math.min(newPage, MAX_PAGE))
        doPageChange(pageNum)
    }
    next = () => { goToPage(pageNum + 1) }
    prev = () => { goToPage(pageNum - 1) }
})