Carouhell - Adding items on the fly
Back to Carouhell
This carouhell rotates two frames. Add a third one anytime you click the button which calls the client function addImage(). Check the DOM realtime in the browser console.
<![CDATA[
<link rel="stylesheet" type="text/css" href="src/carouhell.css">
<script src="src/carouhell.js"></script>
<style>
.carouhell { width: 400px; height: 400px; background: gray; }
.carouhell li { transition: 400ms; }
</style>
<script>
function addImage(src) {
var li = document.createElement("li");
li.innerHTML = `<img src="${src}">`;
test.appendChild(li);
}
</script>
<button onclick="addImage('assets/img3.jpg');this.disabled=1">Add the third image</button>
<br><br>
<ul id="test" class="carouhell" data-stay="1000">
<li><img src="assets/img1.jpg">
<li><img src="assets/img2.jpg">
</ul>
]]>