<html>
<head>
<style>
button { touch-action: manipulation; }
</style>
</head>
<body style="text-align:center;">
<h3>Choose Your Character</h3> <img height=180 id="character" src="https://mimo.app/r/hacker.gif"> <br> <button onclick="previous()">Previous</button> <button onclick="next()">Next</button>
<script>
var currentIndex = 0;
const images = [ 'https://mimo.app/r/hacker.gif', 'https://mimo.app/r/wizard.gif', 'https://mimo.app/r/ducky.gif', 'https://mimo.app/r/pirate.gif','https://mimo.app/r/helene.gif'];
function next() { if (currentIndex >= images.length - 1) { currentIndex = 0; } else { currentIndex += 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); } function previous() { if (currentIndex <= 0) { currentIndex = images.length - 1; } else { currentIndex -= 1; } document.getElementById("character").setAttribute("src", images[currentIndex]); }
</script>
</body>
</html> ]]>