Frage stellen
Ich bin auf der Suche nach einer Lösung auf dieses Forum gestoßen und hoffe nun hier den richtigen Denkanstoß zu finden
Problemstellung: Ich möchte auf der neuen Firmenseite meines Vaters einen Imageslider ohne Javascript einbinden. Dazu habe ich bereits im Web genügend Info gefunden. Nach Einbindung des Sliders stellte sich aber heraus, dass beim Zugriff auf die Seite erstmal kein Bild angezeigt wird.
Vorweg: Natürlich wäre das Problem hier mit Hilfe von :first child lösbar, wenn die Bilder nicht einen transparenten Hintergrund hätten. So bin ich auf der Suche nach einer Lösung mit der ich das erste Bild anzeigen lassen kann, welches bei Auswahl des nächsten Bildes aber ausgeblendet wird.
Hier mal die entsprechenden Parameter:
html
- Code: Alles auswählen
<div class="produktbild"><center>
<div id="imageslider">
<img id="image1" src="images/img1.png" alt="Bild 1" />
<img id="image2" src="images/img2.png" alt="Bild 2" />
<img id="image3" src="images/img3.png" alt="Bild 3" />
</div>
<div id="slider">
<a href="#image1"><img src="images/thumbnail/img1.png" alt="Bild 1" /></a>
<a href="#image2"><img src="images/thumbnail/img2.png" alt="Bild 2" /></a>
<a href="#image3"><img src="images/thumbnail/img3.png" alt="Bild 3" /></a>
</div>
Das CSS dazu:
- Code: Alles auswählen
/* Imageslider */
#imageslider {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#imageslider img {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-ms-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#imageslider img:target {
left: 0;
z-index: 8;
opacity: 1;
}
#imageslider img:first-child {
left: 0;
/* hier könnte opacity:1; angeführt werden, dann wird das erste Bild aber von den weiteren nicht zu 100% abgedeckt, da transparenter Hintergrund... */
}
#slider a {
text-decoration: none;
background: transparent;
border: 0px solid white;
padding: 4px 6px;
}
#slider img:hover {
background: transparent;
}
Um das Problem zu veranschaulichen habe ich mal alles hochgeladen, darf hier aber wohl keine url´s posten. Den Link gibts also in meiner Signatur.
Habt Ihr vielleicht Ideen dazu?
