How to create simple slider according to ul li index values?

Question

I am trying to match two index values between slider big images and it's thumbs. When one the thumbs clicked, i am getting index() value of it and try to match with another list to show that image.

Here is jsFiddle example.

jQuery:

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');

thumbs.click(function() {
    var target = $(this).index();
    bigImg.fadeOut(300);
    //problem here
    bigImg.index(target).fadeIn(300);
});​

Note: I can do this with id/class logic but need to solve it with this way.

Answer 1

I'd go with something like this if I had to do it :

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');

thumbs.click(function() {
    var target = $(this).index();
    bigImg.each(function(){
        if($(this).index() != target){
            $(this).fadeOut(300);
        }else{
            $(this).fadeIn(300);
        }
    });    
});​

Anyway, if you wanna keep the logic of your code, the problem is about the function index() on your last line, it returns the index of a jQuery object, but not the jQuery object of a given index.

According to the jQuery API the complementary function of index() is get() but it only returns the DOM Element, hence you can call fadeIn() to it.

What you need to do is to get the jQuery object through eq() method :

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
    var target = $(this).index();

    bigImg.fadeOut(300);

    bigImg.eq(target).fadeIn(300);

});​