Artikel-Hilfsmenü
Mittwoch, 5. Juli 2023 – aktualisiert am Sonntag, 16. Juli 2023
Noch ein CSS-only-Slider
Noch eine Slideshow, gefunden bei Dr.Web. CSS-only. Und recht hübsch.
Auf codepen findet sich auch das HTML und CSS.
Wie alle CSS-Lösungen ist auch diese Slideshow zwar responsive, aber sehr unflexibel, wenn es darum geht, weitere Bilder hinzuzufügen. In diesem Fall müssen die Werte für die CSS-Attribute „animation“ und „@keyframes“ mühselig manuell angepasst werden.
Um das zu vereinfachen, habe ich das CSS mit etwas PHP "aufgemotzt". (Ja, man kann CSS mit PHP steuern.)
Das CSS mit PHP
<style>
@keyframes slidy {
<?php
$anz_dauer = 3; // so lange wird jedes bild gezeigt
$transfer = 2; // so lange dauert der Bildwechsel
// ab hier nicht mehr editieren!
$fileContent = file_get_contents(__FILE__);
$matchCount = substr_count($fileContent, 'img_to_count');
$anz = $matchCount - 2; // hier die Anzahl der Bilder (ohne das letzte verdoppelte)
$dauer = ($anz_dauer + $transfer) * $anz;
$w2 = ($anz_dauer) / $dauer * 100;
$w3 = ($transfer) / $dauer * 100;
echo '0% {left: 0%; }'; echo "\r\n";
echo $w2.'% {left: 0%; }'; echo "\r\n";
$k = $w2 + $w3;
$m = $w2 + $w2 + $w3;
for($i=1; $i <= $anz; $i++) {
echo $k.'% {left: -'.$i.'00%;}';echo "\r\n";
if ($m <= 100) {
echo $m.'% {left: -'.$i.'00%;}';echo "\r\n";
}
$k = $m + $w3;
$m = $k + $w2;
}
?>
}
figure {
margin: 0;
border:0;
font-weight: 100;
}
#captioned-gallery {
width: 600px;
max-width:97%;
overflow: hidden;
}
.slider {
position: relative; width: <?php echo $anz + 1; ?>00%;
font-size: 0; animation: <?php echo $dauer; ?>s slidy infinite;
}
.slider figure {
width: <?php echo 100/($anz+1); ?>%; height: auto;
display: inline-block; position: inherit;
}
.slider img {
width: 100%;
height: 400px !important;
max-height: 60vw;
}
.slider figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff; width: 100%;
font-size: 1rem; padding: .6rem;
}
</style>
Weitere Bilder hinzufügen ist jetzt ein Kinderspiel. Einfach innerhalb der div id="captioned-gallery" ein weiters Bild nach Muster (codepen) dazu. Alles andere erledigt das PHP.
Im "PHP-Teil" des CSS kann wahlweise die Anzeigedauer pro Bild, und die Dauer des Übergangs eingestellt werden:
$anz_dauer = 3; // so lange wird jedes Bild gezeigt
$transfer = 2; // so lange dauert der Bildwechsel
Wenn Sie Verwendung für dieses Script haben:
Einfach hier downloaden
Mit dem Download anerkennen Sie unsere Allgemeinen Geschäftsbedingungen.
Nachtrag 08.07.2023
Ich habe das Script mit JavaScript und etwas PHP noch komfortabler gemacht: Der Besucher kann jetzt die Geschwindigkeit der Slideshow einstellen, oder die Animation stoppen, und manuell durch die Bilder scrollen / wischen.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.