How does one do a javascript slideshow in a grid container?
I am having issue with my slide show not showing in the using CSS grid container. I have had it working outside of a grid container. I am trying to learn and it is a pulled the example from W3schools as I normally don't do web development. I was wondering if this was an issue with my CSS or is it something else? Am I nesting it wrong? Is there a certain way slide shows work in CSS grid container? Or what else it could it be?
let slideIndex = 0;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: .25fr 1.75fr 1.75fr .25fr;
grid-template-areas: "header header header header"
"nav main main checkboxes"
"nav main main checkboxes"
"footer footer footer footer";
/*grid-gap: 0.2em */;
}
/* Navagation section */
/* nav section removed */
main {
/*background: #BF3F7F; */
grid-area: main;
}
main * {
box-sizing: border-box;
}
main .slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
main .mySlides {
display: none;
}
main .prev, main .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
main .next {
right: 0;
border-radius: 3px 0 0 3px;
}
main .prev:hover, main .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
main .text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
main .numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
main .active {
background-color: #717171;
}
main .fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<script scr="../template.js"></script>
<link rel="stylesheet" type="text/css" href="../template.css">
</head>
<body>
<div class="grid">
<nav>
<ul>
<li>
<!-- System Assebmly -->
<div class="dropdown">
<button class="dropbtn">Assembly</button>
<div class="dropdown-content">
<!--Links here-->
</div>
</div>
</li>
<li>
<!-- Logging In-->
<div class="dropdown">
<button class="dropbtn">Loging In</button>
<div class="dropdown-content">
<a href="Logging_In/AtUSDAOffice/AtUSDAOffice.html">At USDA Office</a>
<a href="Logging_In/Remote/Remote.html">Remote</a>
</div>
</div>
</li>
<li>
<!-- Basic Applications -->
<div class="dropdown">
<button class="dropbtn">Basic Applications Setup</button>
<div class="dropdown-content">
<a href="Basic_Applications/Outlook/Outlook.html">Outlook</a>
<!-- Links here-->
</div>
</div>
</li>
<li>
<!-- Agency Appications -->
<div class="dropdown">
<button class="dropbtn">Agency Applications Setup</button>
<div class="dropdown-content">
<!--Links Here -->
</div>
</div>
</li>
</ul>
</nav>
<header>
<h1>Welcome </h1>
</header>
<main>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 23</div>
<img src="1_Instructions.jpeg" >
<div class="text">Instructions</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 23</div>
<img src="2_Computer.jpeg" >
<div class="text">Inventory NRCS Computer</div>
</div>
<div class="mySlides fade">
<div class="3_numbertext">3 / 23</div>
<img src="DockTopDown.jpeg" >
<div class="text">Inventory Dock</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 23</div>
<img src="4_Keyboard.jpeg" >
<div class="text">Inventory Keyboard</div>
</div>
</div>
<script>
currentSlide(1);
</script>
</main>
<div id="checkboxes">checkboxes</div>
<footer>
Copyright © <script type="text/javascript"> document.write(new Date().getFullYear());</script> reserved.
</footer>
</div>
</body>
</html>
Comments
Post a Comment