JSFiddle - React, Tailwind, and code Playground

by Dread Knight

HTML

<div id="carousel">
</div>

CSS

#carousel div { background-color: red !important; }

JavaScript

$(function() {
	// Get the units data as an array
    var units = [{name:1},{name:2},{name:3},{name:4},{name:5},{name:6},{name:7},{name:8}];
	//$.getJSON("data.json", function(units) {
		// Select URL defined unit or a random one to spice things up
		var selected = Math.floor(Math.random()*units.length);
		// Change the avatars, always showing the focused unit in middle
		function carousel() {
            $('#carousel').html('');
			for(var i = -3; i<=3; i++) {
				var number = Math.abs((units.length+selected+i)%units.length);
                console.log(number, selected);
				var name = units[number].name;
				var style = 'style="background: url(\'../images/frame.png\'), url(\'avatars/'+name+'.jpg\'); height: 128px; width: 128px; display: inline-block;"';
                var $div = $('<div '+style+'>'+name+'</div>');
                $div.click(update.bind(null, number));
				$("#carousel").append($div);
			}
		};
		function update(number) {
			selected = number;
			carousel();
		};
		carousel();
			// Show the cards for the selected unit, progress indicator and 3d model if available
			// If new avatar is clicked, repeat the whole process and also update the URL to match
			// Bonus: Page title and disqus commenting system could also match the selected unit
			// Note: It's hard to do PHP's ksort algorithm inside javascript, so use type sorting
//	});

});