Da ich nun zwar verstanden habe, dass ich durch die ID das Label und den Input getrennt haben kann, es mir aber nicht gelang, dem Input ebenfalls das Bild als Thumbnail mitzugeben, habe ich weiter nach Lösungen gesucht und eine gefunden.
http://w3bits.com/css-image-slider/
Ich habe diese Vorlage für mich angepasst und es wurde so, wie ich es haben wollte.
Hier der vereinfachte Code inklusive meiner Anpassungen:
<html>
<head>
<style>
@-webkit-keyframes fade-in{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fade-in {
0% { opacity: 0; }
100% {opacity: 1; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.gallerie-wrapper {
display: flex;
flex-direction: column;
}
#gallerie {
width: 100%;
<!-- max-width: 1000px; -->
}
#gallerie img{
width: 100%;
height: auto;
}
#gallerie figure {
margin: 0 auto;
padding: 0 auto;
}
.trigger {
opacity: 0;
display: none;
}
#gallerie .trigger:checked + figure {
-moz-animation: ease-in-out 1s 1 fade-in;
-webkit-animation: ease-in-out 1s 1 fade-in;
animation: ease-in-out 1s 1 fade-in;
z-index: 500;
}
#gallerie .trigger:not(:checked) + figure {
display: none;
}
.gallerie-navigation label {
cursor: pointer;
}
.gallerie-navigation img{
width: 100%;
height: auto;
border: 1px solid #000;
}
.gallerie-navigation li {
list-style-type: none;
width: 5vw;
margin: 0 1vw;
}
.gallerie-navigation ul{
margin:0;
padding:0;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="gallerie-wrapper">
<div id="gallerie">
<input type="radio" name="gallerie" class="trigger" id="bild1" checked="checked" />
<figure>
<img src="http://placehold.it/1024" />
</figure>
<input type="radio" name="gallerie" class="trigger" id="bild2" />
<figure>
<img src="http://placehold.it/1000/abcdef" />
</figure>
<input type="radio" name="gallerie" class="trigger" id="bild3" />
<figure>
<img src="http://placehold.it/1920/ff0000" />
</figure>
<input type="radio" name="gallerie" class="trigger" id="bild4" />
<figure>
<img src="http://placehold.it/600/00f0f0" />
</figure>
</div>
<div class="gallerie-navigation">
<ul>
<li><label for="bild1"><img src="http://placehold.it/1024" /></label></li>
<li><label for="bild2"><img src="http://placehold.it/1000/abcdef" /></label></li>
<li><label for="bild3"><img src="http://placehold.it/1920/ff0000" /></label></li>
<li><label for="bild4"><img src="http://placehold.it/600/00f0f0" /></label></li>
</ul>
</div>
</div>
</body>
</html>
Dadurch dass die Gallerie im Flexbox-Modell ist, kann die Navigation überall um die Gallerie platziert werden.
Entweder durch Ändern von column in row und/oder Angabe von order.
Ich bin hierbei nur auf ein kleines Problem gestoßen.
Meine Gallerie Navigationsbilder bekommen einen Rand und den kann ich auch ausblenden lassen, wenn kein Bild vorhanden ist.
Nur das Label bzw. li selbst schaffe ich nicht auszublenden, so dass bei zB. 3 Bildern, die Eigenschaft space-between, die restlichen Bilder anders ausrichtet.
Hier kann ich auch beliebig viele Bilder vorbereiten. Ich muss nur jeweils die einzelnen Zeilen kopieren und anpassen.