Append extension

Including the append extension provides one with a method for gracefully handling the addition of child elements. To prevent Sidescroller items from resizing, this should be used inconjunction with fixed item widths and the fixedItemWidth: true option set.

Add another element Remove the first element

<script src="src/extensions/overthrow-sidescroller.append.js"></script>

<script>
	var scrollers = document.querySelectorAll( ".overthrow-enabled .append-demo" );
	overthrow.sidescroller( scrollers, { fixedItemWidth: true });

	document.querySelector( "a.append" ).onclick = function( e ){
		var li = document.createElement( "li" ),
			img = document.createElement( "img");

		img.src = "demo-assets/photos/1.jpg";
		li.appendChild( img );

		// NOTE ie will add the width and height because of the assigned src
		img.removeAttribute( "width" );
		img.removeAttribute( "height" );

		overthrow.sidescroller( scrollers, "append", li );
		e.preventDefault();
	}

	document.querySelector( "a.remove" ).onclick = function( e ){
		var first = scrollers[0].querySelector( "li" );

		first.parentNode.removeChild( first );

		overthrow.sidescroller( scrollers, "refresh" );
		e.preventDefault();
	}
</script>