覆蓋的jCarousel的導航功能，同時保持的personnal（overrided）代碼與轉盤

Question

我添加了一些JS代碼到下一個和上一個按鈕這樣的同步：這是當前顯示的圖像

$('.jcarousel-control-prev').on('click', function(){ 
    updateCurrentPhotoId(-1); 
    return false; 
}); 
$('.jcarousel-control-next').on('click', function(){ 
    updateCurrentPhotoId(+1); 
    return false; 
}); 

所以我知道（只有一個在我的情況下），我可以顯示與圖像相關的內容。

我的問題是當我點擊下一步（或上）非常快：圖像變化緩慢（即使我在同一個第二，「只有一個接着應用」點擊兩次（它不會破壞動畫以應用我的兩次點擊，也沒有記得，在顯示下一張圖像後，我點擊了兩次，並且它應該再次執行下一步）但是我的代碼（updateCurrentPhotoId）每次點擊都執行

所以，要清楚的是，如果我在第一張圖片上，並且在Next上快速點擊3次，則currentPhotoId將增加3倍（很酷），但會顯示第二張圖片，而不是第三張圖片。通常（我等到動畫是d一個再次點擊下一個），沒關係。但是如果我速度太快，我的櫃檯和轉盤不再同步（所以顯示的數據與所顯示的照片無關...）。

我想我可以有一些延遲添加到我的功能，等於動畫時間，但我不知道怎麼辦。

而且，正如我在example上看到的那樣，必須有一種簡單的方法來「將動作與動畫同步」（在該示例中，嘗試點擊旋轉木馬下方的縮略圖非常快，您會看到您必須等待圖像已被更改爲能夠選擇另一個圖像），但我不明白該代碼中的魔術在哪裏（可能是粗體函數？）。

這是例子的代碼：

(function($) { 
// This is the connector function. 
// It connects one item from the navigation carousel to one item from the 
// stage carousel. 
// The default behaviour is, to connect items with the same index from both 
// carousels. This might _not_ work with circular carousels! 
var connector = function(itemNavigation, carouselStage) { 
    return carouselStage.jcarousel('items').eq(itemNavigation.index()); 
}; 

$(function() { 
    // Setup the carousels. Adjust the options for both carousels here. 
    var carouselStage  = $('.carousel-stage').jcarousel(); 
    var carouselNavigation = $('.carousel-navigation').jcarousel(); 

    // We loop through the items of the navigation carousel and set it up 
    // as a control for an item from the stage carousel. 
    // ** Here is the "bolded" function ** 
    carouselNavigation.jcarousel('items').each(function() { 
     var item = $(this); 

     // This is where we actually connect to items. 
     var target = connector(item, carouselStage); 

     item 
      .on('jcarouselcontrol:active', function() { 
       carouselNavigation.jcarousel('scrollIntoView', this); 
       item.addClass('active'); 
      }) 
      .on('jcarouselcontrol:inactive', function() { 
       item.removeClass('active'); 
      }) 
      .jcarouselControl({ 
       target: target, 
       carousel: carouselStage 
      }); 
    }); 

    // Setup controls for the stage carousel 
    $('.prev-stage') 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '-=1' 
     }); 

    $('.next-stage') 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '+=1' 
     }); 

    // Setup controls for the navigation carousel 
    $('.prev-navigation') 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '-=1' 
     }); 

    $('.next-navigation') 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '+=1' 
     }); 
    }); 
})(jQuery); 

這是我的完整的jCarousel的初始化代碼：

var carouselCurrentPhoto = 1; 

function updateCurrentPhotoId(increment){ 
    carouselCurrentPhoto += increment; 

    var photoCount = <?php echo count($project['Photo']); ?>; 

    if(carouselCurrentPhoto <= 0){ 
     carouselCurrentPhoto = photoCount; 
    }else if(carouselCurrentPhoto > photoCount){ 
     carouselCurrentPhoto = 1; 
    } 

    loadPhoto(); 
} 

function loadPhoto(){ 
    var descriptionDiv = $('#description_photo_' + carouselCurrentPhoto)[0]; 
    $('#photo_description')[0].innerHTML = descriptionDiv.innerHTML; 
} 

(function($) { 
    $(function() { 
     /* Carousel initialization */ 
     $('.jcarousel') 
      .jcarousel({ 
       wrap: 'circular', 
      }); 

     /* Prev control initialization */ 
     $('.jcarousel-control-prev') 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .jcarouselControl({ 
       target: '-=1' 
      }); 

     /* Next control initialization */ 
     $('.jcarousel-control-next') 
      .on('jcarouselcontrol:active', function() { 
       $(this).removeClass('inactive'); 
      }) 
      .on('jcarouselcontrol:inactive', function() { 
       $(this).addClass('inactive'); 
      }) 
      .jcarouselControl({ 
       // Options go here 
       target: '+=1' 
      }); 

     $('.jcarousel-control-prev').on('click', function(){ 
      updateCurrentPhotoId(-1); 
      return false; 
     }); 
     $('.jcarousel-control-next').on('click', function(){ 
      updateCurrentPhotoId(+1); 
      return false; 
     }); 

     /* Pagination initialization */ 
     $('.jcarousel-pagination') 
      .on('jcarouselpagination:active', 'a', function() { 
       $(this).addClass('active'); 
      }) 
      .on('jcarouselpagination:inactive', 'a', function() { 
       $(this).removeClass('active'); 
      }) 
      .jcarouselPagination({ 
      }); 
    }); 
})(jQuery); 

$(document).ready(function(){ 
    loadPhoto(); 
}); 

謝謝您的幫助！

Answer 1

爲了將代碼添加到下一個和上一個按鈕，使用這樣的按鈕初始化代碼的方法屬性（在控制選項的一部分）：

$('.jcarousel-control-prev') 
    .on('jcarouselcontrol:active', function() { 
     $(this).removeClass('inactive'); 
    }) 
    .on('jcarouselcontrol:inactive', function() { 
     $(this).addClass('inactive'); 
    }) 
    .jcarouselControl({ 
     target: '-=1', 
     'method': function(){ 
      this.carousel() 
       // Following line must be there to keep the initial action (scroll to the previous image in this case) 
       // and it uses a callback function where we can put the additional code 
       .jcarousel('scroll', this.options('target'), function(){ 
        // So here is my code, which is now always synchronized with the carousel state 
        updateCurrentPhotoId(-1); 
       });  
      } 
    });