Hallo, ich habe eine Diashow wie folgt aufgebaut:
html:
Java:
CSS:
ich würde gern einzelne Bilder individuell beschriften, kriege es aber nicht hin ohne den Gridcontainer zu zerstören (2. Grid).
html:
Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haus</title>
<link rel="icon" type="image/png" href="haus.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<img class="dia responsive fade" src="1.jpg">
<img class="dia responsive fade" src="2.jpg">
<img class="dia responsive fade" src="3.jpg">
<img class="dia responsive fade" src="4.jpg">
<img class="dia responsive fade" src="5.jpg">
<img class="dia responsive fade" src="6.jpg">
<img class="dia responsive fade" src="7.jpg">
<img class="dia responsive fade" src="8.jpg">
<img class="dia responsive fade" src="9.jpg">
<img class="dia responsive fade" src="10.jpg">
<img class="dia responsive fade" src="11.jpg">
<img class="dia responsive fade" src="12.jpg">
<img class="dia responsive fade" src="13.jpg">
<img class="dia responsive fade" src="14.jpg">
<img class="dia responsive fade" src="15.jpg">
<img class="dia responsive fade" src="16.jpg">
<img class="dia responsive fade" src="17.jpg">
<img class="dia responsive fade" src="18.jpg">
<a class="prev" onclick="plusDivs(-1)">❮</a>
<a class="next" onclick="plusDivs(1)">❯</a>
</div>
<script src="java.js"></script>
</body>
</html>
Java:
Code:
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
let i;
let x = document.getElementsByClassName("dia");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length };
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
CSS:
Code:
.grid-container {
display: grid;
grid-template-columns: 98vw;
grid-template-rows: 97vh;
justify-items: center;
align-items: center;
margin-left: -2px;
margin-top: -3px;
}
.prev {
cursor: pointer;
position: absolute;
top: 50%;
left: 5%;
color: black;
font-weight: bold;
font-size: 40px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
cursor: pointer;
position: absolute;
top: 50%;
right: 5%;
width: auto;
color: black;
font-weight: bold;
font-size: 40px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.prev:hover,
.next:hover {
background-color: darkgrey;
}
.responsive {
max-width: 99%;
height: 97%;
object-fit: scale-down;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
ich würde gern einzelne Bilder individuell beschriften, kriege es aber nicht hin ohne den Gridcontainer zu zerstören (2. Grid).