From f43650c784f76b5701077ffe2f8dd1402a71e9c2 Mon Sep 17 00:00:00 2001 From: James Dinh Date: Mon, 19 Dec 2022 23:20:22 -0800 Subject: [PATCH] Added slideshow --- css/general.css | 26 ++++--- index.html | 6 +- js/general.js | 197 ++++++++++++++++++++++++------------------------ 3 files changed, 118 insertions(+), 111 deletions(-) diff --git a/css/general.css b/css/general.css index 1e622cd..84f28f1 100644 --- a/css/general.css +++ b/css/general.css @@ -312,10 +312,10 @@ nav ul li { #podium-label-2 { margin-left: 1px !important; } - /* #header-background { + #header-background { background-position: unset !important; background-size: unset !important; - } */ + } #logo { height: 180px !important; width: 180px !important; @@ -826,30 +826,34 @@ section { } .slider { - width: 300px; - height: 200px; - margin: auto; + width: 100%; + min-width: 390px; + max-width: 680px; + height: 400px; + margin: 20px auto; display: flex; + align-items: center; } -.wrapper { +.slides-wrapper { overflow: hidden; position: relative; background: #222; - z-index: 1; border-radius: 5px; } #items { width: 10000px; position: relative; top: 0; - left: -300px; + left: -600px; } + #items.shifting { transition: left .2s ease-out; } + .slide { - width: 300px; - height: 200px; + width: 600px; + height: 400px; cursor: pointer; float: left; display: flex; @@ -1314,7 +1318,7 @@ section { padding: 20px 20px; margin-top: 20px; width: 95%; - min-width: 300px; + min-width: 390px; max-width: 650px; background-color: rgb(29, 27, 36); border-radius: 10px; diff --git a/index.html b/index.html index 2cb764a..543079e 100644 --- a/index.html +++ b/index.html @@ -165,9 +165,9 @@
We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.
- +
diff --git a/js/general.js b/js/general.js index 791a62a..ade8603 100644 --- a/js/general.js +++ b/js/general.js @@ -141,6 +141,9 @@ document.addEventListener('DOMContentLoaded', function(){ '#what-GilroyHacks', '#why-GilroyHacks', '#who-GilroyHacks', + '#slide-wrapper-main', + '#prev', + '#next', '#signup-title', '#steps-card', '#sponsor-title', @@ -371,117 +374,117 @@ document.addEventListener( false ); -// var slider = document.getElementById('slider'), -// sliderItems = document.getElementById('items'), -// prev = document.getElementById('prev'), -// next = document.getElementById('next'); -// slide(slider, sliderItems, prev, next); -// function slide(wrapper, items, prev, next) { -// var posX1 = 0, -// posX2 = 0, -// posInitial, -// posFinal, -// threshold = 100, -// slides = items.getElementsByClassName('slide'), -// slidesLength = slides.length, -// slideSize = items.getElementsByClassName('slide')[0].offsetWidth, -// firstSlide = slides[0], -// lastSlide = slides[slidesLength - 1], -// cloneFirst = firstSlide.cloneNode(true), -// cloneLast = lastSlide.cloneNode(true), -// index = 0, -// allowShift = true; +var slider = document.getElementById('slider'), + sliderItems = document.getElementById('items'), + prev = document.getElementById('prev'), + next = document.getElementById('next'); +slide(slider, sliderItems, prev, next); +function slide(wrapper, items, prev, next) { + var posX1 = 0, + posX2 = 0, + posInitial, + posFinal, + threshold = 100, + slides = items.getElementsByClassName('slide'), + slidesLength = slides.length, + slideSize = items.getElementsByClassName('slide')[0].offsetWidth, + 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'); + // Clone first and last slide + items.appendChild(cloneFirst); + items.insertBefore(cloneLast, firstSlide); + wrapper.classList.add('loaded'); -// // Mouse and Touch events -// items.onmousedown = dragStart; + // Mouse and Touch events + items.onmousedown = dragStart; -// // Touch events -// items.addEventListener('touchstart', dragStart); -// items.addEventListener('touchend', dragEnd); -// items.addEventListener('touchmove', dragAction); + // 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) }); + // Click events + prev.addEventListener('click', function () { shiftSlide(-1) }); + next.addEventListener('click', function () { shiftSlide(1) }); -// // Transition events -// items.addEventListener('transitionend', checkIndex); + // Transition events + items.addEventListener('transitionend', checkIndex); -// function dragStart (e) { -// e = e || window.event; -// e.preventDefault(); -// posInitial = items.offsetLeft; + 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 == '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"; -// } + 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 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'); + 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--; -// } -// }; + 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; -// } + 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; -// } + 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; -// } -// } + allowShift = true; + } +} var options = { series: [{