Gallery Swapper

by midas7g

HTML

<div id="gallery-container">
</div>

CSS

.gallery-item {
  display: block;
  width: 100px;
  height: 100px;
}

#gallery-container {
  display: flex;
}

JavaScript

Array.prototype.shuffle = function() {
	let currentIndex = this.length,  randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [this[currentIndex], this[randomIndex]] = [this[randomIndex], this[currentIndex]];
  }

  return this;
}

let galleryPool = [
			{
				"src" : {
					"1x" : "/clients/Logo-1.png",
					"2x" : "/clients/Logo-1@2x.png",
					"3x" : "/clients/tLogo-1@3x.png"
				},
				"alt" : "xyz",
        "color": "red"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-2.png",
					"2x" : "/clients/Logo-2@2x.png",
					"3x" : "/clients/tLogo-2@3x.png"
				},
				"alt" : "xyz",
        "color": "orange"
        
			},
			{
				"src" : {
					"1x" : "/clients/Logo-3.png",
					"2x" : "/clients/Logo-3@2x.png",
					"3x" : "/clients/tLogo-3@3x.png"
				},
				"alt" : "xyz",
        "color": "yellow"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-4.png",
					"2x" : "/clients/Logo-4@2x.png",
					"3x" : "/clients/tLogo-4@3x.png"
				},
				"alt" : "xyz",
        "color": "green"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-5.png",
					"2x" : "/clients/Logo-5@2x.png",
					"3x" : "/clients/tLogo-5@3x.png"
				},
				"alt" : "xyz",
        "color": "blue"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-6.png",
					"2x" : "/clients/Logo-6@2x.png",
					"3x" : "/clients/tLogo-6@3x.png"
				},
				"alt" : "xyz",
        "color": "indigo"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-7.png",
					"2x" : "/clients/Logo-7@2x.png",
					"3x" : "/clients/tLogo-7@3x.png"
				},
				"alt" : "xyz",
        "color": "violet"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-8.png",
					"2x" : "/clients/Logo-8@2x.png",
					"3x" : "/clients/tLogo-8@3x.png"
				},
				"alt" : "xyz",
        "color": "black"
			},
			{
				"src" : {
					"1x" : "/clients/Logo-9.png",
					"2x" : "/clients/Logo-9@2x.png",
					"3x" : "/clients/tLogo-9@3x.png"
				},
				"alt" : "xyz",
       ...