Overthrow Sidescroller

The sidescroller extension (not included by default) makes a horizontal carousel-like component of an Overthrow area. This provides you with carousel-like functionality built on a system of tiered fallbacks. Changes and additions to this basic behavior are available via the extensions listed below.

Basic Sidescroller

overthrow.sidescroller( document.querySelectorAll( ".overthrow-enabled .sidescroll-nextprev" ) );

Hidden scrollbar

For a more seamless “carousel” effect, the Sidescroller’s scrollbar can be hidden with CSS.

.sidescroll-nextprev {
  overflow: hidden;
}
.sidescroll-nextprev .sidescroll {
  margin-top: -50px;
  padding-bottom: 50px;
  bottom: -50px;
  position: relative;
}

Extensions

Rewind extension

The rewind extension will allow the Sidescroller to animate back to the first child element upon navigating beyond the last element.

overthrow.sidescroller( document.querySelectorAll( ".overthrow-enabled .rewind" ), { rewind: true });

Snap extension

The snap extension ensures that the Sidescroller’s child elements are always aligned flush with the Overthrow container.

overthrow.sidescroller( document.querySelectorAll( ".overthrow-enabled .sidescroll-nextprev" ), { snapScroll: true });

Append extension

The `append` extension provides a method for gracefully handling the addition and removal of child elements.

Append an 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/10.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>

var scroller = document.querySelectorAll( ".overthrow-enabled .goto-nav" );

overthrow.sidescroller( scroller );

document.querySelector( "a.goto" ).onclick = function( e ){
	overthrow.sidescroller( scroller, "goTo", 3 );
	e.preventDefault();
}