如何同步兩個輪播滑塊 - Twitter Bootstrap

Question

我在一個頁面上有兩個滑塊（twitter bootstrap 3.3.6）。 兩者都應該通過相同的控制元素激活。 當通過鍵盤箭頭鍵激活時 - 非常快速的點擊 - ，我失去了同步; 特別是在Firefox（v 49.0.1）中。 這意味着標題滑塊中的圖像不屬於內容滑塊中的文本。

我如何才能意識到滑塊僅在兩個滑塊的動畫完成后才會被激活？

我已經嘗試過jQuery-promise（），但錯誤保持不變。

謝謝你的幫助。

 $(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

為什么不跟蹤一個全局變量來跟蹤你所在的頁面。

$(() => {
    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) }
})