Added slideshow
This commit is contained in:
James Dinh
parent
27b1ba0151
commit
f43650c784
@ -312,10 +312,10 @@ nav ul li {
|
|||||||
#podium-label-2 {
|
#podium-label-2 {
|
||||||
margin-left: 1px !important;
|
margin-left: 1px !important;
|
||||||
}
|
}
|
||||||
/* #header-background {
|
#header-background {
|
||||||
background-position: unset !important;
|
background-position: unset !important;
|
||||||
background-size: unset !important;
|
background-size: unset !important;
|
||||||
} */
|
}
|
||||||
#logo {
|
#logo {
|
||||||
height: 180px !important;
|
height: 180px !important;
|
||||||
width: 180px !important;
|
width: 180px !important;
|
||||||
@ -826,30 +826,34 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
width: 300px;
|
width: 100%;
|
||||||
height: 200px;
|
min-width: 390px;
|
||||||
margin: auto;
|
max-width: 680px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 20px auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
.wrapper {
|
.slides-wrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #222;
|
background: #222;
|
||||||
z-index: 1;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
#items {
|
#items {
|
||||||
width: 10000px;
|
width: 10000px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -300px;
|
left: -600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#items.shifting {
|
#items.shifting {
|
||||||
transition: left .2s ease-out;
|
transition: left .2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide {
|
.slide {
|
||||||
width: 300px;
|
width: 600px;
|
||||||
height: 200px;
|
height: 400px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
float: left;
|
float: left;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1314,7 +1318,7 @@ section {
|
|||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
min-width: 300px;
|
min-width: 390px;
|
||||||
max-width: 650px;
|
max-width: 650px;
|
||||||
background-color: rgb(29, 27, 36);
|
background-color: rgb(29, 27, 36);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
@ -165,9 +165,9 @@
|
|||||||
<div class="splash-desc">We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.</div>
|
<div class="splash-desc">We're a group of high schoolers in the Bay Area looking to spread our love of coding and collaboration to local students.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <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>
|
<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="wrapper">
|
<div class="slides-wrapper" id="slide-wrapper-main">
|
||||||
<div id="items" class="items">
|
<div id="items" class="items">
|
||||||
<span class="slide">Slide 1</span>
|
<span class="slide">Slide 1</span>
|
||||||
<span class="slide">Slide 2</span>
|
<span class="slide">Slide 2</span>
|
||||||
@ -177,7 +177,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
<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>
|
||||||
</article>
|
</article>
|
||||||
<article id="signup-article">
|
<article id="signup-article">
|
||||||
<div id="signup-title">
|
<div id="signup-title">
|
||||||
|
|||||||
197
js/general.js
197
js/general.js
@ -141,6 +141,9 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
'#what-GilroyHacks',
|
'#what-GilroyHacks',
|
||||||
'#why-GilroyHacks',
|
'#why-GilroyHacks',
|
||||||
'#who-GilroyHacks',
|
'#who-GilroyHacks',
|
||||||
|
'#slide-wrapper-main',
|
||||||
|
'#prev',
|
||||||
|
'#next',
|
||||||
'#signup-title',
|
'#signup-title',
|
||||||
'#steps-card',
|
'#steps-card',
|
||||||
'#sponsor-title',
|
'#sponsor-title',
|
||||||
@ -371,117 +374,117 @@ document.addEventListener(
|
|||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// var slider = document.getElementById('slider'),
|
var slider = document.getElementById('slider'),
|
||||||
// sliderItems = document.getElementById('items'),
|
sliderItems = document.getElementById('items'),
|
||||||
// prev = document.getElementById('prev'),
|
prev = document.getElementById('prev'),
|
||||||
// next = document.getElementById('next');
|
next = document.getElementById('next');
|
||||||
// slide(slider, sliderItems, prev, next);
|
slide(slider, sliderItems, prev, next);
|
||||||
// function slide(wrapper, items, prev, next) {
|
function slide(wrapper, items, prev, next) {
|
||||||
// var posX1 = 0,
|
var posX1 = 0,
|
||||||
// posX2 = 0,
|
posX2 = 0,
|
||||||
// posInitial,
|
posInitial,
|
||||||
// posFinal,
|
posFinal,
|
||||||
// threshold = 100,
|
threshold = 100,
|
||||||
// slides = items.getElementsByClassName('slide'),
|
slides = items.getElementsByClassName('slide'),
|
||||||
// slidesLength = slides.length,
|
slidesLength = slides.length,
|
||||||
// slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
|
slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
|
||||||
// firstSlide = slides[0],
|
firstSlide = slides[0],
|
||||||
// lastSlide = slides[slidesLength - 1],
|
lastSlide = slides[slidesLength - 1],
|
||||||
// cloneFirst = firstSlide.cloneNode(true),
|
cloneFirst = firstSlide.cloneNode(true),
|
||||||
// cloneLast = lastSlide.cloneNode(true),
|
cloneLast = lastSlide.cloneNode(true),
|
||||||
// index = 0,
|
index = 0,
|
||||||
// allowShift = true;
|
allowShift = true;
|
||||||
|
|
||||||
// // Clone first and last slide
|
// Clone first and last slide
|
||||||
// items.appendChild(cloneFirst);
|
items.appendChild(cloneFirst);
|
||||||
// items.insertBefore(cloneLast, firstSlide);
|
items.insertBefore(cloneLast, firstSlide);
|
||||||
// wrapper.classList.add('loaded');
|
wrapper.classList.add('loaded');
|
||||||
|
|
||||||
// // Mouse and Touch events
|
// Mouse and Touch events
|
||||||
// items.onmousedown = dragStart;
|
items.onmousedown = dragStart;
|
||||||
|
|
||||||
// // Touch events
|
// Touch events
|
||||||
// items.addEventListener('touchstart', dragStart);
|
items.addEventListener('touchstart', dragStart);
|
||||||
// items.addEventListener('touchend', dragEnd);
|
items.addEventListener('touchend', dragEnd);
|
||||||
// items.addEventListener('touchmove', dragAction);
|
items.addEventListener('touchmove', dragAction);
|
||||||
|
|
||||||
// // Click events
|
// Click events
|
||||||
// prev.addEventListener('click', function () { shiftSlide(-1) });
|
prev.addEventListener('click', function () { shiftSlide(-1) });
|
||||||
// next.addEventListener('click', function () { shiftSlide(1) });
|
next.addEventListener('click', function () { shiftSlide(1) });
|
||||||
|
|
||||||
// // Transition events
|
// Transition events
|
||||||
// items.addEventListener('transitionend', checkIndex);
|
items.addEventListener('transitionend', checkIndex);
|
||||||
|
|
||||||
// function dragStart (e) {
|
function dragStart (e) {
|
||||||
// e = e || window.event;
|
e = e || window.event;
|
||||||
// e.preventDefault();
|
e.preventDefault();
|
||||||
// posInitial = items.offsetLeft;
|
posInitial = items.offsetLeft;
|
||||||
|
|
||||||
// if (e.type == 'touchstart') {
|
if (e.type == 'touchstart') {
|
||||||
// posX1 = e.touches[0].clientX;
|
posX1 = e.touches[0].clientX;
|
||||||
// } else {
|
} else {
|
||||||
// posX1 = e.clientX;
|
posX1 = e.clientX;
|
||||||
// document.onmouseup = dragEnd;
|
document.onmouseup = dragEnd;
|
||||||
// document.onmousemove = dragAction;
|
document.onmousemove = dragAction;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// function dragAction (e) {
|
function dragAction (e) {
|
||||||
// e = e || window.event;
|
e = e || window.event;
|
||||||
|
|
||||||
// if (e.type == 'touchmove') {
|
if (e.type == 'touchmove') {
|
||||||
// posX2 = posX1 - e.touches[0].clientX;
|
posX2 = posX1 - e.touches[0].clientX;
|
||||||
// posX1 = e.touches[0].clientX;
|
posX1 = e.touches[0].clientX;
|
||||||
// } else {
|
} else {
|
||||||
// posX2 = posX1 - e.clientX;
|
posX2 = posX1 - e.clientX;
|
||||||
// posX1 = e.clientX;
|
posX1 = e.clientX;
|
||||||
// }
|
}
|
||||||
// items.style.left = (items.offsetLeft - posX2) + "px";
|
items.style.left = (items.offsetLeft - posX2) + "px";
|
||||||
// }
|
}
|
||||||
|
|
||||||
// function dragEnd (e) {
|
function dragEnd (e) {
|
||||||
// posFinal = items.offsetLeft;
|
posFinal = items.offsetLeft;
|
||||||
// if (posFinal - posInitial < -threshold) {
|
if (posFinal - posInitial < -threshold) {
|
||||||
// shiftSlide(1, 'drag');
|
shiftSlide(1, 'drag');
|
||||||
// } else if (posFinal - posInitial > threshold) {
|
} else if (posFinal - posInitial > threshold) {
|
||||||
// shiftSlide(-1, 'drag');
|
shiftSlide(-1, 'drag');
|
||||||
// } else {
|
} else {
|
||||||
// items.style.left = (posInitial) + "px";
|
items.style.left = (posInitial) + "px";
|
||||||
// }
|
}
|
||||||
// document.onmouseup = null;
|
document.onmouseup = null;
|
||||||
// document.onmousemove = null;
|
document.onmousemove = null;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// function shiftSlide(dir, action) {
|
function shiftSlide(dir, action) {
|
||||||
// items.classList.add('shifting');
|
items.classList.add('shifting');
|
||||||
|
|
||||||
// if (allowShift) {
|
if (allowShift) {
|
||||||
// if (!action) { posInitial = items.offsetLeft; }
|
if (!action) { posInitial = items.offsetLeft; }
|
||||||
// if (dir == 1) {
|
if (dir == 1) {
|
||||||
// items.style.left = (posInitial - slideSize) + "px";
|
items.style.left = (posInitial - slideSize) + "px";
|
||||||
// index++;
|
index++;
|
||||||
// } else if (dir == -1) {
|
} else if (dir == -1) {
|
||||||
// items.style.left = (posInitial + slideSize) + "px";
|
items.style.left = (posInitial + slideSize) + "px";
|
||||||
// index--;
|
index--;
|
||||||
// }
|
}
|
||||||
// };
|
};
|
||||||
|
|
||||||
// allowShift = false;
|
allowShift = false;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// function checkIndex (){
|
function checkIndex (){
|
||||||
// items.classList.remove('shifting');
|
items.classList.remove('shifting');
|
||||||
// if (index == -1) {
|
if (index == -1) {
|
||||||
// items.style.left = -(slidesLength * slideSize) + "px";
|
items.style.left = -(slidesLength * slideSize) + "px";
|
||||||
// index = slidesLength - 1;
|
index = slidesLength - 1;
|
||||||
// }
|
}
|
||||||
// if (index == slidesLength) {
|
if (index == slidesLength) {
|
||||||
// items.style.left = -(1 * slideSize) + "px";
|
items.style.left = -(1 * slideSize) + "px";
|
||||||
// index = 0;
|
index = 0;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// allowShift = true;
|
allowShift = true;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
series: [{
|
series: [{
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user