Question

I’ve been using this slideshow

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

with the demo here … http://tympanus.net/Tutorials/ElasticSlideshow/

All I want is for the nav at the bottom to show the current index, so the child li’s of the .ei-slider-thumbs div to have a class like ‘current’ if they are the selected slide.

Didn’t want to paste a whole load of code, so just provided the links instead, hopefully check out the demo in firebug?

Any help would be appreciated! Many thanks

—-EDIT—-

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

I’ve observed that active element is “ei-slider-element” and it is moving towards to the clicked element. You can write your own function for targeting current element’s index.

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