Integrating ALS Scroller in Webpages

Vertical Scroller

Vertical Als scroller is widely used in webpages to create vertical slider. It helps you a lot as a designer as it doesn't affect the responsiveness of the page. This list is composed by generic <div> elements.

<div id="vscroll" class="als-container">
	<span class="als-prev">
		<img src="images/thin_top_arrow.png" alt="prev" title="previous" />
	</span>
	<div class="als-viewport">
		<div class="als-wrapper">
			<div class="als-item"><img src="images/ps-icon.png"/>Photoshop</div>
			<div class="als-item"><img src="images/html-icon.jpg"/>HTML</div>
			<div class="als-item"><img src="images/css-icon.png"/>CSS</div>
			<div class="als-item"><img src="images/bs-icon.png"/>BOOTSTRAP</div>
			<div class="als-item"><img src="images/js-icon.png"/>JQUERY</div>
			<div class="als-item"><img src="images/php-icon.jpg"/>PHP</div>
		</div>
	</div>
	<span class="als-next">
		<img src="images/thin_bottom_arrow.png" alt="next" title="next" />
	</span>
</div>	

It's almost identical to the horizontal one apart from the div id and the fact that the contents are placed inside individual divs instead of those <ul> and <li> tags. The additional script too is quite similar to the first one.

For vertical ALS scroller, you need to wrap all of your scrolling contents inside the a wrapper with class als-container and an id. The id will activate the js script shown below while the als-container will add some styles. The als-prev and als-next class styles the navigation arrows. The als-viewport and als-wrapper class add some styles to the div where the scrolling content is placed while the als-item adds some styles to the content itself. Apart from the related css and js files you need to add some scripts for the slider in your webpage or create a new js file adding the scripts shown below.

<script>
$(document).ready(function(){		
	$("#vscroll").als({
		visible_items: 3,
		scrolling_items: 1,
		orientation: "vertical",
		circular: "yes",
		autoscroll: "yes"
	});
});								
</script>	
		

With the initialization script, you can further define the number of visible items as well as the number of scrolling items at a time. You must define the orientation to define whether it is horizontal or vertical. You can also set the scroll in loop with circular option while the autoscroll option makes the scroll run on its own.