Updated slideshow
This commit is contained in:
James Dinh
parent
4ff1578841
commit
8839877bb6
@ -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 {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
height: 400px;
|
||||
margin: 20px auto 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.splide {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.slides-wrapper {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #222;
|
||||
.slide-content {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.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;
|
||||
bottom: 2%;
|
||||
position: relative;
|
||||
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
|
||||
1
css/splide.min.css
vendored
Normal file
1
css/splide.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
15
index.html
15
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>
|
||||
|
||||
134
js/general.js
134
js/general.js
@ -144,9 +144,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
||||
'#what-GilroyHacks',
|
||||
'#why-GilroyHacks',
|
||||
'#who-GilroyHacks',
|
||||
'#slide-wrapper-main',
|
||||
'#prev',
|
||||
'#next',
|
||||
'#splide',
|
||||
'#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'),
|
||||
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');
|
||||
|
||||
// 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 splide = new Splide( '.splide', {
|
||||
type : 'loop',
|
||||
focus : 'center',
|
||||
autoplay: true,
|
||||
lazyLoad: true,
|
||||
keyboard: true,
|
||||
isNavigation: true,
|
||||
pauseOnHover: true,
|
||||
pauseOnFocus: true,
|
||||
speed: 1000,
|
||||
interval: 5000,
|
||||
} );
|
||||
|
||||
splide.mount();
|
||||
|
||||
|
||||
// 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
|
||||
9
js/splide.min.js
vendored
Normal file
9
js/splide.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/splide.min.js.map
Normal file
1
js/splide.min.js.map
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user