<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
* {
padding: 0;
margin: 0;
}
.bigImage img {
width: 400px;
}
.smallImages img {
width: 100px;
padding: 0 1px;
}
</style>
</head>
<body>
<div class="bigImage">
<img src="" alt="" />
</div>
<div class="smallImages">
<img src="http://imagine.pics/images/753/75359.jpg" alt="" />
<img src="http://wallpage.ru/imgbig/wallpapers_5087.jpg" alt="" />
<img src="http://carster.info/images/car_catalog/bmw/2013-bmw-m3-convertible_4.jpg" alt="" />
<img src="http://widefon.com/_ld/169/81658594.jpg" alt="" />
</div>
<script>
let bigImage = document.querySelector('.bigImage img');
bigImage.setAttribute('src',
document.querySelectorAll('.smallImages img')[0].getAttribute('src'));
document.querySelectorAll('.smallImages')[0].onclick = function(event) {
let link = event.target.getAttribute('src');
bigImage.setAttribute('src', link);
}
</script>
</body>
</html>
Если вариант подходит, могу помочь довести его до ума.
Я так полагаю еще свайп добавить и будет ваш вариант?
