hallo,
ich habe mir von der codepen.io Seite einen Imageslider geholt, dieser funktioniert gut für 4 Bilder, im html sind 5, da das letzte wie das erste ist für den schönen Übergang.
Nun wollte ich einfach ein 6,7 tes usw dazufügen,
aber egal was ich in den css ändere es passt nie??
Entweder sind dann alle zu lang, kurz, plötzlich ist eine schwarze Fläche darunter wie ein weiterer Platzhalter....
Am sinnvollsten erschien mir noch: 5 Bilder -> 500% , dann sind 6 Bilder -> 600%,
auch das geht nicht,
ich habe mal beide sachen gepostet, vielleicht hat ja jemand eine Idee oder Verbesserung.
dank euch Tino
Code
@keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
figure {
background: #101010;
font-family: Bradley Hand ITC;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
margin-left: 5%;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 20s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 100%;
font-size: 2rem;
}
Alles anzeigen
und im html:
Code
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="bilder/slider/slide01.jpg" alt>
<figcaption>Strand Lofoten, Norwegen</figcaption>
</figure>
<figure>
<img src="bilder/slider/slide02.jpg" alt>
<figcaption>Costa Calida, Spanien</figcaption>
</figure>
<figure>
<img src="bilder/slider/slide03.jpg" alt>
<figcaption>Pindos Gebirge, Griechenland</figcaption>
</figure>
<figure>
<img src="bilder/slider/slide04.jpg" alt>
<figcaption>Benidorm, Spanien</figcaption>
</figure>
<figure>
<img src="bilder/slider/slide01.jpg" alt>
<figcaption>Strand Lofoten, Norwegen</figcaption>
</figure>
</figure>
</div>
Alles anzeigen