Раздвижные изображения с css3

Question

Я пытаюсь сделать простой слайдер изображения.

Вот Javascript код:

$(document).ready(function() { 
    $('#slide1_images').on('click', 'img', function(){ 
    $("#slide1_images").css("transform","translateX("+$(this).index() * -450+"px)"); 
    }); 
}); 

Проблема, кажется, что он не получает щелчок на нужном изображении, но это занимает щелчок на следующей. Зачем?

Вот работоспособной exmaple:

http://jsfiddle.net/y4BkQ/

Answer 1

.index() возвращает индекс отсчитывается от 0. + ($ (this) .index() + 1) * 450 +