Add scrolable gene word clouds

layouts/custom/sc.data.html

+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
 {{ partial "header.html" . }}
 
 <div class="header">
@@ -17,15 +19,24 @@
         overflow-x: hidden;
         padding: 8px 10px;
     }
+    .contents {
+        margin: 0;
+        max-width: none;
+        float: center;
+    }
     .column {
         float: left;
         text-align: center;
         width: 50%;
     }
-    img {
+    .img {
         max-width: 75%;
         height: auto;
+        margin-left: auto;
+        margin-right: auto;
     }
+    .huGenes {display:none;}
+    .muGenes {display:none;}
     @media (max-width: 1000px) {
         .column  {
             width: 100%;
@@ -33,18 +44,23 @@
     }
 </style>
 
-
-
-
 <div class="cloud">
     <div class="select">
-        <div class="column">
-            <img src="/gene.cloud/Genes.hu.202005.png" alt="April 2020 Human Genes" class="img"/>
-            <H5>Human Genes Searched (May 2020)</H5>
-        </div>
-        <div class="column">
-            <img src="/gene.cloud/Genes.mu.202005.png" alt="April 2020 Mouse Genes" class="img"/>
-            <H5>Mouse Genes Searched (May 2020)</H5>
+        <div class="contents w3-content w3-display-container">
+            <div class="column">
+                <p class="w3-padding-5 w3-black huGenesName"></p>
+                <img class="huGenes img" src="/gene.cloud/Genes.hu.202005.png" alt="Human genes searched in May 2020">
+                <img class="huGenes img" src="/gene.cloud/Genes.hu.202004.png" alt="Human genes searched in April 2020">
+                <img class="huGenes img" src="/gene.cloud/Genes.hu.202003.png" alt="Human genes searched in March 2020">
+            </div>
+            <div class="column">
+                <p class="w3-padding-5 w3-black MuGenesName"></p>
+                <img class="muGenes img" src="/gene.cloud/Genes.mu.202005.png" alt="Mouse genes searched in May 2020">
+                <img class="muGenes img" src="/gene.cloud/Genes.mu.202004.png" alt="Mouse genes searched in April 2020">
+                <img class="muGenes img" src="/gene.cloud/Genes.mu.202003.png" alt="Mouse genes searched in March 2020">
+            </div> 
+            <div class="w3-left" style="font-size:30px" onclick="plusCloud(1)">&#10094;</div>
+            <div class="w3-right" style="font-size:30px"onclick="plusCloud(-1)">&#10095;</div>  
         </div>
     </div>
 </div>
@@ -58,4 +74,29 @@
     <hr>
 </div>
 
+<script>
+    var slideIndex = 1;
+    showCloud(slideIndex);
+        
+    function plusCloud(n) {
+      showCloud(slideIndex += n);
+    }
+
+    function showCloud(n) {
+      var i;
+      var x = document.getElementsByClassName("huGenes");
+      var y = document.getElementsByClassName("muGenes");
+      if (n > x.length) {slideIndex = 1}
+      if (n < 1) {slideIndex = x.length}
+      for (i = 0; i < x.length; i++) {
+        x[i].style.display = "none";
+        y[i].style.display = "none";
+      }
+      x[slideIndex-1].style.display = "block";
+      y[slideIndex-1].style.display = "block";
+      document.getElementsByClassName("huGenesName")[0].innerHTML = x[slideIndex-1].alt;
+      document.getElementsByClassName("muGenesName")[0].innerHTML = y[slideIndex-1].alt;
+    }
+</script>
+
 {{ partial "footer.html" . }}
\ No newline at end of file