Integrating ALS Scroller in Webpages


Horizontal Scroller

Horizontal als scroller is not much famous in web designing as it's got a major bug unfixed. The contents tend to appear incomplete while the scroller goes round and round. But, it can be a good option if you need to display only one image in the slider at a time unlike the other slider plugins that allow you to display multiple slides at once. This list is composed by classical list elements <ul> and <li>

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

For horizontal als scroller, you need to wrap all of your scrolling contents inside the lista1 id with class als-container. The id lista1 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 solling 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() 
		{
			$("#lista1").als({
			visible_items: 1,
			scrolling_items: 1,
			orientation: "horizontal",
			circular: "yes",
			autoscroll: "yes",
			interval: 5000,
			direction: "left"
		});
	});	
</script>			
			

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 as well. This list is composed by generic <div> elements.

<div id="lista2" 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.

<script>
	$(document).ready(function() 
		{		
			$("#lista2").als({
			visible_items: 3,
			scrolling_items: 1,
			orientation: "vertical",
			circular: "yes",
			autoscroll: "yes"
		});
	});								
</script>	
		
prev
Photoshop
HTML
CSS
BOOTSTRAP
JQUERY
PHP
next

Download ALS Slider zip file from here.