彈性圖像幻燈片

Question

我一直在使用這個幻燈片

http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/

這裏的演示... http://tympanus.net/Tutorials/ElasticSlideshow/

所有我想要的是用於導航的底部，顯示當前的指數，所以如果他們是選定的幻燈片，則.ei-slider-thumbs div的子li將具有類似'current'的類。

不想粘貼整個代碼的負載，所以只提供了鏈接，希望看看在螢火蟲演示？

任何幫助，將不勝感激！非常感謝

---- ----編輯

$('.ei-slider-element').addClass("active1"); 
    $('ul.ei-slider-thumbs li').click(function (e) { 
     var currentEle = $(this).index(); 
     // alert(currentEle); 
     e.preventDefault();   
     $('[class*="active"]').removeClass(function (i, c) { 
      return c.match(/active\d+/g).join(" "); 
     }); 
     $('.ei-slider-element').addClass("active" + currentEle); 
    }); 

Answer 1

我觀察到有效元素「ei-slider-element」，它是對所點擊的元素移動。您可以編寫自己的函數來定位當前元素的索引。

$('ul.ei-slider-thumbs li').click(function(){ 
    var currentEle = $(this).index(); 
    alert(currentEle); 
});