Updated slideshow

css/general.css

@@ -480,7 +480,7 @@ nav * {
   }
 }
 @media (max-width: 500px) {
-  #event, #rules, #prizes, #team {
+  #signup-article, #rules, #prizes, #team {
     transform: scale(0.9);
   }
   section {
@@ -997,92 +997,42 @@ section {
   color: #fbc334;
 }
 
-.slider {
+.splide {
-  width: 100%;
+  margin: 20px auto;
-  max-width: 680px;
-  height: 400px;
-  margin: 20px auto 50px;
-  display: flex;
-  align-items: center;
 }
 
-.slides-wrapper {
+.slide-content {
-  width: 100%;
+  margin-bottom: 10px;
-  max-width: 600px;
+  text-align: center;
-  overflow: hidden;
+  max-width: fit-content;
-  position: relative;
+}
-  background: #222;
+
+.splide, .splide__track, .splide__list, .splide__slide, .slide-content, .slide-img {
   border-radius: 5px;
 }
 
-#items {
-  width: 10000px;
-  position: relative;
-  top: 0;
-  left: -600px;
-}
-
-#items.shifting {
-  transition: left .2s ease-out;
-}
-
-.slide {
-  /* min-width: 340px; */
-  max-width: 600px;
-  min-height: 200px;
-  max-height: 400px;
-  cursor: pointer;
-  float: left;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  transition: all 1s;
-  position: relative;
-  align-items: center;
-}
-
 .slide-caption {
-  position: absolute;
+  position: relative;
-  bottom: 2%;
+  bottom: 35px;
   background-color: #232323b8;
   padding: 2px 5px;
   border-radius: 5px;
 }
 
-.slide-button {
-  margin: 9px;
-}
-
-.control {
-  position: relative;
-  width: 40px;
-  height: 40px;
-  background-color: rgb(80, 80, 80);
-  border-radius: 20px;
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
-  z-index: 1;
-}
-.prev,
-.next {
-  cursor: pointer;
-}
-
-.prev {
-  left: 20px;
-}
-.next {
-  right: 20px;
-}
-.prev:active,
-.next:active {
-  transform: scale(0.8);
-}
-
 .slide-img {
   width: 100%;
   height: auto;
 }
 
+.splide__slide, .splide__slide:focus, .splide.is-focus-in, .splide__pagination__page:focus-visible {
+  border: none !important;
+  outline: none !important;
+}
+
+li .splide__pagination__page.is-active {
+  background: #545454;
+}
+
 .list {
   padding-left: 20px;
 }
@@ -1491,6 +1441,7 @@ section {
 /* Schedule */
 #schedule {
   padding-top: 70px;
+  margin-bottom: 30px;
 }
 
 .schedule-parent {
@@ -2795,4 +2746,4 @@ footer li {
 /* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and
 coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? 
 Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to 
-newcomers. If this sounds like you, then all aboard the Hackathon tra
+newcomers. If this sounds like you, then all aboard the Hackathon tra

index.html

@@ -16,6 +16,7 @@
     <title>Gilroy Hacks</title>
     <link href="css/general.css" rel="stylesheet" type="text/css" media="all">
     <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
+    <link href="css/splide.min.css" rel="stylesheet" type="text/css" media="all">
     <link rel="stylesheet" href="css/leaflet.css"/>
     <link rel="icon" href="img/icon.ico">
     <link rel="apple-touch-icon" href="img/Gilroy_Hacks_Logo_app.png">
@@ -30,6 +31,7 @@
     <script defer src="js/map.js"></script> -->
     <script defer src="js/general.js"></script>
     <script src="js/apexcharts.js"></script>
+    <script src="js/splide.min.js"></script>
     <script src="js/jquery-3.6.0.min.js"></script>
     <script>document.getElementsByTagName("html")[0].className += " js";</script>
     <script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/script.js"></script>
@@ -147,7 +149,7 @@
                         <h2 class="description-heading">New Hackathon Who Dis?</h2>
                     </div>
                     <h3 id="headline-recap">A recap of Summer 2022:</h3>
-                    <div id="slider" class="slider">
+                    <!-- <div id="slider" class="slider">
                         <a id="prev" class="control prev"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></a>
                         <div class="slides-wrapper" id="slide-wrapper-main">
                             <div id="items" class="items">
@@ -159,6 +161,17 @@
                             </div>
                         </div>
                         <a id="next" class="control next"><svg class="slide-button" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></a>
+                    </div> -->
+                    <div class="splide" id="splide" aria-label="Splide Slideshow">
+                        <div class="splide__track">
+                              <ul class="splide__list">
+                                  <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/first_place_winner.jpg" loading="lazy" alt="First place winners"><span class="slide-caption">🎉 First Place Winners - Christian Nguyen, Connor Palsgrove 🎉</span></div></li>
+                                  <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/opening_ceremony.jpg" loading="lazy" alt="Opening Ceremony"><span class="slide-caption">Opening Ceremony 👍</span></div></li>
+                                  <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/brainstorm.png" loading="lazy" alt="Brainstorming ideas..."><span class="slide-caption">🤔 Brainstorming ideas...</span></div></li>
+                                  <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/python_workshop.jpg" loading="lazy" alt="Python Workshop"><span class="slide-caption">💻 Python Workshop 💻</span></div></li>
+                                  <li class="splide__slide"><div class="slide-content"><img class="slide-img" src="img/prizes.png" loading="lazy" alt="Prizes"><span class="slide-caption">🏆 Prizes! 🏆</span></div></li>
+                              </ul>
+                        </div>
                     </div>
                     <hr id="div-hr"><br>
                     <span class="caption" id="splash-entrance">Some info on us...</span>

js/general.js

@@ -144,9 +144,7 @@ document.addEventListener('DOMContentLoaded', function(){
     '#what-GilroyHacks',
     '#why-GilroyHacks',
     '#who-GilroyHacks',
-    '#slide-wrapper-main',
+    '#splide',
-    '#prev',
-    '#next',
     '#signup-title',
     '#steps-card',
     '#sponsor-title',
@@ -328,7 +326,7 @@ function save() {
 }
 window.onload = function() {
     load();
-    document.getElementById('#menu-btn').checked = false;
+    uncheck('menu-btn');
 };
 function load() {
     for (i = 0; i < checkboxes.length; i++) {
@@ -425,117 +423,21 @@ document.addEventListener(
   false
 ); 
 
-var slider = document.getElementById('slider'),
+var splide = new Splide( '.splide', {
-    sliderItems = document.getElementById('items'),
+  type   : 'loop',
-    prev = document.getElementById('prev'),
+  focus  : 'center',
-    next = document.getElementById('next');
+  autoplay: true,
-slide(slider, sliderItems, prev, next);
+  lazyLoad: true,
-function slide(wrapper, items, prev, next) {
+  keyboard: true,
-  var posX1 = 0,
+  isNavigation: true,
-      posX2 = 0,
+  pauseOnHover: true,
-      posInitial,
+  pauseOnFocus: true,
-      posFinal,
+  speed: 1000,
-      threshold = 100,
+  interval: 5000,
-      slides = items.getElementsByClassName('slide'),
+} );
-      slidesLength = slides.length,
+
-      slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
+splide.mount();
-      firstSlide = slides[0],
+
-      lastSlide = slides[slidesLength - 1],
-      cloneFirst = firstSlide.cloneNode(true),
-      cloneLast = lastSlide.cloneNode(true),
-      index = 0,
-      allowShift = true;
-  
-  // Clone first and last slide
-  items.appendChild(cloneFirst);
-  items.insertBefore(cloneLast, firstSlide);
-  wrapper.classList.add('loaded');
-  
-  // Mouse and Touch events
-  items.onmousedown = dragStart;
-  
-  // Touch events
-  items.addEventListener('touchstart', dragStart);
-  items.addEventListener('touchend', dragEnd);
-  items.addEventListener('touchmove', dragAction);
-  
-  // Click events
-  prev.addEventListener('click', function () { shiftSlide(-1) });
-  next.addEventListener('click', function () { shiftSlide(1) });
-  
-  // Transition events
-  items.addEventListener('transitionend', checkIndex);
-  
-  function dragStart (e) {
-    e = e || window.event;
-    e.preventDefault();
-    posInitial = items.offsetLeft;
-    
-    if (e.type == 'touchstart') {
-      posX1 = e.touches[0].clientX;
-    } else {
-      posX1 = e.clientX;
-      document.onmouseup = dragEnd;
-      document.onmousemove = dragAction;
-    }
-  }
-  function dragAction (e) {
-    e = e || window.event;
-    
-    if (e.type == 'touchmove') {
-      posX2 = posX1 - e.touches[0].clientX;
-      posX1 = e.touches[0].clientX;
-    } else {
-      posX2 = posX1 - e.clientX;
-      posX1 = e.clientX;
-    }
-    items.style.left = (items.offsetLeft - posX2) + "px";
-  }
-  
-  function dragEnd (e) {
-    posFinal = items.offsetLeft;
-    if (posFinal - posInitial < -threshold) {
-      shiftSlide(1, 'drag');
-    } else if (posFinal - posInitial > threshold) {
-      shiftSlide(-1, 'drag');
-    } else {
-      items.style.left = (posInitial) + "px";
-    }
-    document.onmouseup = null;
-    document.onmousemove = null;
-  }
-  
-  function shiftSlide(dir, action) {
-    items.classList.add('shifting');
-    
-    if (allowShift) {
-      if (!action) { posInitial = items.offsetLeft; }
-      if (dir == 1) {
-        items.style.left = (posInitial - slideSize) + "px";
-        index++;      
-      } else if (dir == -1) {
-        items.style.left = (posInitial + slideSize) + "px";
-        index--;      
-      }
-    };
-    
-    allowShift = false;
-  }
-    
-  function checkIndex (){
-    items.classList.remove('shifting');
-    if (index == -1) {
-      items.style.left = -(slidesLength * slideSize) + "px";
-      index = slidesLength - 1;
-    }
-    if (index == slidesLength) {
-      items.style.left = -(1 * slideSize) + "px";
-      index = 0;
-    }
-    
-    allowShift = true;
-  }
-}
 
 // var options = {
 //   series: [{
@@ -615,4 +517,4 @@ function slide(wrapper, items, prev, next) {
 //   };
 
 //   var chart = new ApexCharts(document.querySelector("#chart"), options);
-//   chart.render();
+//   chart.ren