Question

There is a row which can accommodate only three images at once but i have several images in server and all i want to fetch. so in that case i need image slider.

Let say there are 10 images e.g. img_1,img_2,img_3,........img_10 and a row & it contains only three images img_1, img_2, img_3 alongwith Left_slider_button & Right_slider_button. What i want? When click on slider_button the images should forward in button direction one by one.
Suppose if i click on left_slider_button then img_2, img_3, img_4 should be in row instead of img_1, img_2, img_3. So There is one image forwarded to left direction and one new image fetched as img_4.

please give me some tips. I guess AJAX would be more useful to fetch the images from server, Right?.

Answer 1

You can put your image names in an array and then loop through them. I used three div’s to hold the images but you could use anything.

$(function () {
    var images = ["img_1", "img_2", "img_3", "img_4", "img_5", "img_6", "img_7", "img_8", "img_9", "img_10"],
        curIndex = 0,
        gotoImage = function (index) {
            $('#images div').each(function (i) {
               var image = curIndex + i;
                if (image >= images.length) {
                    image = image - images.length;
                }
               $(this).html(images[image]);
               // Use something like this to show images instead of text
               // $(this).html('<img src="' + images[image] + '.jpg" />');
            });            
        };

    $('.prev').click(function (e) {
        curIndex--;
        if (curIndex === -1) {
            curIndex = images.length - 1;
        }
        gotoImage(curIndex);
    });

    $('.next').click(function (e) {
        curIndex++;
        if (curIndex === images.length) {
            curIndex = 0;
        }
        gotoImage(curIndex);
    });
});

Here is an example: http://jsfiddle.net/rustyjeans/c3sJW/

There’s no need to use ajax to load the images, unless you don’t know what the list of images is going to be. If you’re pulling the list of image names from a databse you could use ajax to get that data out and put it in an array, then you could assign that to the array images.