DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

started work on slideshow code

Browse source
This commit is contained in:
Nye Evans 2021-01-01 16:28:29 +00:00
parent 9146d50ea5
commit 741f04ebb0
3 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Pages/Mainpage.css
View file

@ -48,6 +48,12 @@ h2, h3{
}
button{
background-color: transparent;
border: none;
color: #ffd256;
}
.orangeBack{ /*for anything that isnt a <h> tag*/

6
Pages/index.html
View file

@ -1,6 +1,8 @@
<HTML>
<header>
<link rel = "stylesheet" href = "Mainpage.css">
<script href = "Gallery.js"></script>
<title>Nye Evans Portfolio</title>
</header>
<body>
<!--<img src = "..\Images\ScreenFilter.png" style = "position: fixed; top: 0; left: 0;">-->
@ -34,8 +36,8 @@
<img src = "gallery\Cat_tower_defense\projectHeaderImage.png" class = "GalleryImage">
<p class = "GalleryTitle orangeBack">Image Title</p>
<p class = "GalleryCaption orangeBack">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class = "GalleryLeftArrow">◄</p>
<p class = "GalleryRightArrow">►</p>
<button class = "GalleryLeftArrow" onclick = "lastSlide()">◄</button>
<button class = "GalleryRightArrow" onclick = "nextSlide()">►</button>
</div>
<div id = "personalGallery" style = "margin-bottom: 40vh;">

31
pages/Gallery.js Normal file
View file

@ -0,0 +1,31 @@
class slide{
constructor(title, caption, image){
this.title = title;
this.caption = caption;
this.image = image;
}
}
var currentSlide = 0;
var slides = []
function nextSlide(){
currentSlide++;
updateSlide();
}
function lastSlide(){
currentSlide--;
updateSlide();
}
function updateSlide(){
if (currentSlide > slides.length){
currentSlide = 0;
} else if (currentSlide < 0){
currentSlide = slides.length;
}
console.log(currentSlide);
}