julianmurillo
Gebruiker
- Lid geworden
- 15 jan 2018
- Berichten
- 41
Hi allemaal
Ik heb de volgende slider:
Hoe kan ik het aanpassen (animatie implementeren) zodat elke afbeeldingen wordt naar links geschoven elke 3 seconden? Zoals het nu opstaat wordt de afbeelding meteen vervangen door de volgende, wat niet zo leuk eruitziet.
Dank voor jullie hulp
Ik heb de volgende slider:
HTML:
<div class="slider-content slider-section" style="max-width: 500px;">
<img class="slides" src="" />
<img class="slides" src="" style="width: 100%;" />
<img class="slides" src="" style="width: 100%;" />
<img class="slides" src="" style="width: 100%;" />
<img class="slides" src="" style="width: 100%;" />
<img class="slides" src="" style="width: 100%;" />
</div>
<script type="text/javascript">// <![CDATA[
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3 seconds
}
// ]]></script>
Hoe kan ik het aanpassen (animatie implementeren) zodat elke afbeeldingen wordt naar links geschoven elke 3 seconden? Zoals het nu opstaat wordt de afbeelding meteen vervangen door de volgende, wat niet zo leuk eruitziet.
Dank voor jullie hulp