Слайдер для сайта.
 

<center><img id = "canvas" src="http://i11.pixs.ru:/storage/4/2/0/1jpg_3166953_19131420.jpg">

<div><img src="http://i11.pixs.ru:/storage/4/2/1/1jpg_9676351_19131421.jpg" data-large="http://i11.pixs.ru:/storage/4/2/0/1jpg_3166953_19131420.jpg" onclick="updateCanvas(this);return false;">

<img src="http://i11.pixs.ru:/storage/4/4/4/21jpg_9232825_19131444.jpg" data-large="http://i11.pixs.ru:/storage/4/4/3/2jpg_7191238_19131443.jpg" onclick="updateCanvas(this);return false;">

<img src="http://i11.pixs.ru:/storage/4/2/5/31jpg_5993910_19131425.jpg" data-large="http://i11.pixs.ru:/storage/4/2/4/3jpg_5351941_19131424.jpg" onclick="updateCanvas(this);return false;">

<img src="http://i11.pixs.ru:/storage/4/2/7/42jpg_9290393_19131427.jpg" data-large="
http://i11.pixs.ru:/storage/4/2/6/4jpg_7113673_19131426.jpg" onclick="updateCanvas(this);return false;">

<img src="http://i11.pixs.ru:/storage/4/2/9/51jpg_3683505_19131429.jpg" data-large="http://i10.pixs.ru:/storage/4/2/8/5jpg_2959958_19131428.jpg" onclick="updateCanvas(this);return false;">

</div></center>



<script>
function updateCanvas(image){
if(!image)return;
var largeImage = image.getAttribute('data-large');
if(!largeImage)return;
document.getElementById('canvas').setAttribute('src', largeImage);
}
</script>

Есть вот такой код слайдера.
Проблема в том, что таких слайдеров должно быть несколько. При размножении кода слайдер работает криво.
При нажатии на мини копию картинки во втором слайдере, большая картинка меняется в первом.

Спасибо. У меня получилось то же проставлением индивидуальных ID к канвасу)
Картинки внизу грузятся по отдельной ссылке. можно их как то переделать в уменьшенный вариант большой картинки.
Тобишь, что бы по одной ссылке картинки большая и маленькая грузилась, но большая уменьшалась до 500 пикселей, а маленькая до 75?
и при нажатии на большую картинку, она открывалась в новом окошке в полном размере. (на этой же странице)
заранее спасибо)