弹性图像幻灯片

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); 
});