nicht angemeldet
FredDu wolltest fragen: „Wieso kann ich das nicht nachbauen?“
Ich liebe dieses Forum 😉
Meine Kenntisse, was du da versucht hast, gehen eher gen Null.
So sieht es aus:
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Foto-Slider</title>
<style>
figure { margin: 0;}
div, figcaption, input {
font: 1em/1.2 Calibri, sans-serif;
width: 335px;
max-width: 100%;
margin-bottom: 0.4em;
}
div {
height: 335px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg/1024px-Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg);
background-position: calc(var(--percentage, 0) * 1%) center;
}
</style>
</head>
<body>
<script>
const divElement = document.querySelector('div');
const inputElement = document.querySelector('input');
slide();
inputElement.addEventListener('input', slide);
function slide(event)
{
divElement.style.setProperty('--percentage', inputElement.value);
}
</script>
<figure>
<div></div>
<figcaption>Riesengebirge</figcaption>
</figure>
<input type="range" value="0" min="0" max="100" aria-label="slider"/>
</body>
</html>
--
I � Unicode
I � Unicode
marctrix
Gunnar Bittersmann
Der Martin
Christian Kruse
Matthias Apsel