Hello everyone, I have been attempting to follow a tutorial from the W3C school site on how to do the automatic
slideshow and what I had wanted to do specifically was to enable each of the three images within the “slide motion”
class and the texts within the “pseudo” class to slide simultaneously, here is the code.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume Builder</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
position: relative;
display: inline-block;
width: 60%;
background-image: transparent;
background-blend-mode: lighten;
opacity: 100%;
background-image: linear-gradient(360deg, rgb(207, 137, 99), rgb(255, 255, 255), rgb(207, 137, 99));
background-size: 200px;
background-position-x: 500px;
background-attachment: scroll;
overflow: scroll;
overflow-x: hidden;
}
.slide {
display: flex;
position: absolute;
left: -100px;
width: calc(200%+ 200px);
height: 700px;
bottom: 300px;
filter: rgb(207, 137, 99);
filter: saturate(99%);
filter: hue-rotate(20deg);
opacity: 100%;
}
.slide {
animation-name: slide;
animation-duration: 1.5s;
}
@keyframes slide {
from {
opacity: .4
}
to {
opacity: 1
}
}
</style>
<h1>Sharpe's CV & Business Cards</h1>
<div id="slide-container">
<div class="slide"> <img src="infographic-resume-template-header.png" style="width: 5500px; height: 850px;"
alt="first slide">
</div>
<div class="slide">
<img src="graphic-design-work-resume.png" style="width: 5500px; height: 850px" alt="second slide">
</div>
<div class="slide">
<img src="brush-background.png" style="width: 5500px; height: 850px" alt="last slide">
</div>
</div>
<br>
<div style="text-align: center;">
<span class="pseudo">Inexpensive designs and quality.</span>
<span class="pseudo">Diverse and professional styles.</span>
<span class="pseudo">Catering to your professional and academic needs.</span>
</div>
<!--This is where the cover banner for website should be -->
<nav id="backg3">
<p class="logo" style="top: 900px;"><strong>Giving credentials a Sharper edge.</strong></p>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
<nav></nav>
</nav>
<div>
<div class="businesscard">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="Tab1">
<a href="ggggggg">
<p>About</p>
</a>
</div>
<div class="Tab2">
<a href="ggggggg">
<p>Contact</p>
</a>
</div>
<div class="Tab3">
<a href="ggggggg">
<p>Resume Type</p>
</a>
</div>
<div class="Tab4">
<a href="ggggggg">
<p>Business Cards</p>
</a>
</div>
<script src="myscript.js">
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("slide");
let text = document.getElementsByClassName("pseudo");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < text.length; i++) {
text[i].className = text[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
text[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change Image every 2 seconds
}
</script>
