Adding arrows to spotlight slideshow

april-tools · Sep 2, 2023 · b12188b · b12188b
1 parent dc4a922
commit b12188b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 17 deletions.
diff --git a/_pages/about.md b/_pages/about.md
@@ -37,10 +37,10 @@ We are a research lab focused on investigating probabilistic models and programs
       </div>
     {% endif %}
   {% endfor %}
+    <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
 </div>
-<br>
-
-
 <div style="text-align:center">
   {% for post in site.publications %}
     {% if post.spotlight %}
@@ -51,22 +51,52 @@ We are a research lab focused on investigating probabilistic models and programs
 
 <script>
   let slideIndex = 0;
-  showSlides();
+  showSlides(slideIndex);
+
+  function plusSlides(n) {
+  showSlides(slideIndex += n);
+  }
+
 
-  function showSlides() {
+
+  function showSlides(n=0) {
     let i;
     let slides = document.getElementsByClassName("spotlight-slide");
     let dots = document.getElementsByClassName("dot");
-    for (i = 0; i < slides.length; i++) {
-      slides[i].style.display = "none";  
+
+    if (n == 0)
+    {
+      for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";  
+      }
+      slideIndex++;
+
+      if (slideIndex > slides.length) {slideIndex = 1}    
+        for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+      }
+
+      slides[slideIndex-1].style.display = "block";  
+      dots[slideIndex-1].className += " active";
+      setTimeout(showSlides, 10000); /* Change image every 10 seconds */
     }
-    slideIndex++;
-    if (slideIndex > slides.length) {slideIndex = 1}    
-    for (i = 0; i < dots.length; i++) {
-      dots[i].className = dots[i].className.replace(" active", "");
+
+    else
+    {
+      if (n > slides.length) {slideIndex = 1}
+      if (n < 1) {slideIndex = slides.length}
+
+      for (i = 0; i < slides.length; i++) {
+        slides[i].style.display = "none";  
+      }
+
+      if (slideIndex > slides.length) {slideIndex = 1}    
+        for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+      }
+
+      slides[slideIndex-1].style.display = "block";  
+      dots[slideIndex-1].className += " active";
     }
-    slides[slideIndex-1].style.display = "block";  
-    dots[slideIndex-1].className += " active";
-    setTimeout(showSlides, 10000); /* Change image every 10 seconds */
   }
   </script>
diff --git a/_sass/_about.scss b/_sass/_about.scss
@@ -59,7 +59,7 @@
   }
 
   .pubs-header {
-    margin-top: 1em;
+    margin-top: 10px;
     margin-bottom: 0.5em;
     font-size: $type-size-3;
     color: mix(#fff, #000, 75%);
@@ -80,7 +80,7 @@
 /* Slideshow container */
 .slideshow-container {
   max-width: 80%;
-  max-height: 20%;
+  max-height: 17%;
   position: relative;
   margin: auto;
   align: left;
@@ -101,7 +101,7 @@
 .spotlight-slide img {
   vertical-align: middle;
   width: auto;
-  max-height: 400px;
+  max-height: 300px;
   object-fit: cover;
 }
 
@@ -129,6 +129,35 @@
   background-color: #717171;
 }
 
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 40%;
+  width: auto;
+  padding: 16px;
+  margin-top: -50px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 /* Fading animation */
 .fade {
   animation-name: fade;