There are 10 pictures, they are displayed in a row list.

<img src="..1" /> <img src="..2" />

As to save space, describe in js so that one picture is displayed, and when you click on it, the next one is displayed, and so on in a circle.

It looks like a carousel, but without auto-scrolling.

(A bunch of plugins, but I'm not a fan of plugins.)

    1 answer 1

    there are many ways, for example

     [].slice.call(document.querySelectorAll('img')).forEach(function(el, i, arr) { i && (el.style.display = 'none'); el.onclick = function(e) { el.style.display = 'none'; arr[i + 1 === arr.length ? 0 : i + 1].style.display = 'inherit'; } });

    but I would add a class to these images:

     <img class='slider' src='...'/> <img class='slider' src='...'/>

    just to select from the page only their

     document.querySelectorAll('img.slider');