Ich bräuchte mal Hilfe ich habe 24 bilder und einen range slider und ich würde es gerne so machen das mann die Bilder wechseln kann mit den Slider hier ist die vorlage, mann braucht denke ich einen java script
Code
<h1></h1>
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
<img src="7.png">
<img src="8.png">
<img src="9.png">
<img src="10.png">
<img src="11.png">
<img src="12.png">
<img src="13.png">
<img src="14.png">
<img src="15.png">
<img src="16.png">
<img src="17.png">
<img src="18.png">
<img src="19.png">
<img src="20.png">
<img src="21.png">
<img src="22.png">
<img src="23.png">
<img src="24.png">
<div class="slidecontainer">
<p></p>
<input type="range" min="1" max="24" value="12" class="slider" id="myRange">
</div>
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: gray;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px;
height: 50px;
border-radius: 50px;
background: blue;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
</style>Gerne den Code und das weitere hier rein 