<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>
Есть вот такой код слайдера.
Проблема в том, что таких слайдеров должно быть несколько. При размножении кода слайдер работает криво.
При нажатии на мини копию картинки во втором слайдере, большая картинка меняется в первом.