Characteristics

ALS - Any List Scroller is the jQuery plugin by musings.it to scroll any list, of any dimension, with any content. Try it!

It is surprisingly easy to use
it works on any kind of list
List elements can be texts, images, anything (read the instructions below)
List items must not have a fixed size, or equal to each other
The list can be scrolled horizontally or vertically
Scrolling can be simple or infinite (circular)
Scrolling can be manual or automatic (autoscroll)
You can set the number of visible items
You can set the scrolling step
You can set the starting item (new v.1.1)
You can put more than one ALS in a single page (multiple instance)

Version

Version v.1.1 date: 16.04.2013 - added "start_from" option

Version v.1.0 date: 14.06.2012 - initial release

License

ALS is released with double license MIT or GPLv.3

Help

If you need any help, go on reading the documentation in this page, download the "demo" version with the demo page and the commented code, or contact us, we'll be happy to help you.

Personalization

Would you like a personalized version of ALS? Contact us ant tell us about your peoject, we'll find a solution that suits your needs.

Demo

Demo 1

Simple horizontal scrolling, type of scrolling: manual, visible elements: 3, scrolling step: 2

orange
apple
banana
blueberry
watermelon
cherry
strawberry
avocado
pear
pineapple
papaya
raspberry

Look at the code for this demo open

HTML

<div class="als-container" id="demo1">
  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/fruits/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/fruits/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/fruits/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/fruits/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/fruits/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fruits/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/fruits/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/fruits/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/fruits/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/fruits/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/fruits/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

CSS

/*************************************
 * generic styling for ALS elements
 ************************************/

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
}

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

.als-wrapper {
	position: relative;
	list-style: none;
}

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}
/*************************************
 * specific styling for #demo1
 ************************************/

#demo1 {
	margin: 40px auto;
}

#demo1 .als-item {
	margin: 0px 5px;
	padding: 4px 0px;
	min-height: 120px;
	min-width: 100px;
	text-align: center;
}

#demo1 .als-item img {
	display: block;
	margin: 0 auto;
	vertical-align: middle;
}

#demo1 .als-prev, #demo1 .als-next {
	top: 40px;
}

#demo1 .als-prev {
	left: 200px;
}

#demo1 .als-next {
	right: 200px;
}

ALS configuration

$("#demo1").als({
	visible_items: 3,
	scrolling_items: 2,
	orientation: "horizontal",
	circular: "no",
	autoscroll: "no"
});

Demo 2

Infinite horizontal scrolling, type of scrolling: manual, visible elements: 4, scrolling step: 1

orange
apple
banana
blueberry
watermelon
cherry
strawberry
avocado
pear
pineapple
papaya
raspberry

Look at the code for this demo open

HTML

<div class="als-container" id="demo2">
  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/fruits/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/fruits/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/fruits/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/fruits/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/fruits/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fruits/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/fruits/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/fruits/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/fruits/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/fruits/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/fruits/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

CSS

/*************************************
 * generic styling for ALS elements
 ************************************/

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
}

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

.als-wrapper {
	position: relative;
	list-style: none;
}

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}
/*************************************
 * specific styling for #demo2
 ************************************/

#demo2 {
	margin: 40px auto;
}

#demo2 .als-item {
	margin: 0px 5px;
	padding: 4px 0px;
	min-height: 120px;
	min-width: 100px;
	text-align: center;
}

#demo2 .als-item img {
	display: block;
	margin: 0 auto;
	vertical-align: middle;
}

#demo2 .als-prev, #demo2 .als-next {
	top: 40px;
}

#demo2 .als-prev {
	left: 200px;
}

#demo2 .als-next {
	right: 200px;
}

ALS configuration

$("#demo2").als({
	visible_items: 4,
	scrolling_items: 1,
	orientation: "horizontal",
	circular: "yes",
	autoscroll: "no"
});

Demo 3

Infinite horizontal scrolling, type of scrolling: automatic, visible elements: 4, scrolling step: 2, interval: 4 seconds

orange
apple
banana
blueberry
watermelon
cherry
strawberry
avocado
pear
pineapple
papaya
raspberry

Look at the code for this demo apri

HTML

<div class="als-container" id="demo3">
  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/fruits/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/fruits/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/fruits/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/fruits/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/fruits/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fruits/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/fruits/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/fruits/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/fruits/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/fruits/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/fruits/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

CSS

/*************************************
 * generic styling for ALS elements
 ************************************/

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
}

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

.als-wrapper {
	position: relative;
	list-style: none;
}

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}
/*************************************
 * specific styling for #demo3
 ************************************/

#demo3 {
	margin: 40px auto;
}

#demo3 .als-item {
	margin: 0px 5px;
	padding: 4px 0px;
	min-height: 120px;
	min-width: 100px;
	text-align: center;
}

#demo3 .als-item img {
	display: block;
	margin: 0 auto;
	vertical-align: middle;
}

#demo3 .als-prev, #demo3 .als-next {
	top: 40px;
}

#demo3 .als-prev {
	left: 200px;
}

#demo3 .als-next {
	right: 200px;
}

ALS configuration

$("#demo3").als({
	visible_items: 4,
	scrolling_items: 2,
	orientation: "horizontal",
	circular: "yes",
	autoscroll: "yes",
	interval: 4000
});

Demo 4

Simple horizontal scrolling, type of scrolling: manual, visible elements: 4, scrolling step: 2, start from: 2 (third element, zero based)

orange
apple
banana
blueberry
watermelon
cherry
strawberry
avocado
pear
pineapple
papaya
raspberry

Look at the code for this demo apri

HTML

<div class="als-container" id="demo4">
  <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
  <div class="als-viewport">
    <ul class="als-wrapper">
      <li class="als-item"><img src="images/fruits/arancio.png" alt="orange" title="orange" />orange</li>
      <li class="als-item"><img src="images/fruits/mela.png" alt="apple" title="apple" />apple</li>
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li>
      <li class="als-item"><img src="images/fruits/mirtillo.png" alt="blueberry" title="blueberry" />blueberry</li>
      <li class="als-item"><img src="images/fruits/anguria.png" alt="watermelon" title="watermelon" />watermelon</li>
      <li class="als-item"><img src="images/fruits/ciliegia.png" alt="cherry" title="cherry" />cherry</li>
      <li class="als-item"><img src="images/fruits/fragola.png" alt="strawberry" title="strawberry" />strawberry</li>
      <li class="als-item"><img src="images/fruits/avocado.png" alt="avocado" title="avocado" />avocado</li>
      <li class="als-item"><img src="images/fruits/pera.png" alt="pear" title="pear" />pear</li>
      <li class="als-item"><img src="images/fruits/ananas.png" alt="pineapple" title="pineapple" />pineapple</li>
      <li class="als-item"><img src="images/fruits/papaya.png" alt="papaya" title="papaya" />papaya</li>
      <li class="als-item"><img src="images/fruits/lampone.png" alt="raspberry" title="raspberry" />raspberry</li>
    </ul>
  </div>
  <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>

CSS

/*************************************
 * generic styling for ALS elements
 ************************************/

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
}

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

.als-wrapper {
	position: relative;
	list-style: none;
}

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}
/*************************************
 * specific styling for #demo4
 ************************************/

#demo4 {
	margin: 40px auto;
}

#demo4 .als-item {
	margin: 0px 5px;
	padding: 4px 0px;
	min-height: 120px;
	min-width: 100px;
	text-align: center;
}

#demo4 .als-item img {
	display: block;
	margin: 0 auto;
	vertical-align: middle;
}

#demo4 .als-prev, #demo4 .als-next {
	top: 40px;
}

#demo4 .als-prev {
	left: 200px;
}

#demo4 .als-next {
	right: 200px;
}

ALS configuration

$("#demo4").als({
	visible_items: 4,
	scrolling_items: 2,
	orientation: "horizontal",
	circular: "yes",
	autoscroll: "no",
	start_from: 2
});

Instructions

1. Structure

2. Basic HTML

We have to define the elements illustrated in ALS Structure and give them the classes shown in the figure: als-container, als-viewport, als-wrapper and als-item. The only optional elements are als-prev and als-next and they become necessary only if a manual list scrolling is chosen.

als-wrapper and als-item can be classical list elements <ul> <li> or generic <div> elements.

<!-- define a container with class "als-container": this will be the object binded to ALS; we suggest to give it an ID
to retrieve it easily during ALS inizialization -->

<div class="als-container" id="my-als-list">

<!-- if you choose manual scrolling (which is set by default), insert <span> with class "als-prev"  and "als-next": 
they define the buttons "previous" and "next"; within the <span> you can use images or simple text -->	
  
  <span class="als-prev"><img src="images/prev.png" alt="prev" title="previous" /></span>

<!-- define a container with class "als-viewport": this will be the viewport for the list visible elements -->

  <div class="als-viewport">
  
<!-- define a container with class "als-wrapper": this will be the wrapper for the list elements, 
it can be a classic <ul> element or even a <div> element -->

    <ul class="als-wrapper">

<!-- define the list elements, each must have class "als-item"; they can be classic <li> elements 
or generic <div> elements and they can contain anything: text, images, ... -->

      <li class="als-item">orange</li> <!-- text only -->
      <li class="als-item"><img src="images/fruits/apple.png" alt="apple" title="apple" /></li> <!-- image -->
      <li class="als-item"><img src="images/fruits/banana.png" alt="banana" title="banana" />banana</li> <!-- image + text -->

    </ul> <!-- als-wrapper end -->
  </div> <!-- als-viewport end -->
  <span class="als-next"><img src="images/next.png" alt="next" title="next" /></span> <!-- "next" button -->
</div> <!-- als-container end -->

3. Basic CSS

The styling of the generic ALS elements reported below is strongly recommended. Various elements are then stylized at will to suit the position chosen (see the code of the demo).

If list elements contain images we suggest to add to the styling of als-item values for min-width and min-height (see the code of the demo).

/*****************************************************
 * generic styling for ALS elements: outer container
 ******************************************************/

.als-container {
	position: relative;
	width: 100%;
	margin: 0px auto;
	z-index: 0;
}

/****************************************
 * viewport styling
 ***************************************/

.als-viewport {
	position: relative;
	overflow: hidden;
	margin: 0px auto;
}

/***************************************************
 * wrapper styling
 **************************************************/

.als-wrapper {
	position: relative;
	/* if you are using a list with <ul> <li> */
	list-style: none;
}

/*************************************
 * item: single list element
 ************************************/

.als-item {
	position: relative;
	display: block;
	text-align: center;
	cursor: pointer;
	float: left;
}

/***********************************************
 * prev, next: buttons styling
 **********************************************/
 
.als-prev, .als-next {
	position: absolute;
	cursor: pointer;
	clear: both;
}

4. Files to include

<!-- basic ALS css -->
<link rel="stylesheet" type="text/css" media="screen" href="path/css/als_style.css" />

<!-- your jQuery version -->
<script type="text/javascript" src="path/js/jquery-last.min.js" ></script>

<!-- your ALS version -->
<script type="text/javascript" src="path/js/jquery.als-1.1 .min.js" ></script>

5. Basic inizialization

<!-- in our example the container has id="my-als-list" thus ALS is initialized like this -->

<script type="text/javascript">
	$(document).ready(function(){
		$("#my-als-list").als();
	});	
</script>

6. Configurable options

visible-items (number)

It is the number of visible elements of the list.

Accepted values: integers. Default value: 3. Configuration example:

$("#my-als-list").als({
	visible_items: 4
});

scrolling-items (number)

It is the scrolling step of the list elements.

Accepted values: integers. Default value: 1. Configuration example:

$("#my-als-list").als({
	scrolling_items: 2
});

orientation (string)

It definers the list orientation: it can be horizontal or vertical.

Accepted values: "horizontal" and "vertical". Default value: "horizontal". Configuration example:

$("#my-als-list").als({
	orientation: "vertical"
});

circular (string)

It defines the list scrolling type: it can be simple or infinite (circular).

Accepted values: "yes" and "no". Default value: "no". Configuration example:

$("#my-als-list").als({
	circular: "yes"
});

autoscroll (stringa)

It defines how the scrolling starts: manually or automatically.

Please note: if autoscroll is set to "yes" also circular will be set to "yes".

Accepted values: "yes" and "no". Default value: "no". Configuration example:

$("#my-als-list").als({
	autoscroll: "yes"
});

interval (number)

It is the scrolling interval (in msec) when autoscroll is set to "yes".

Accepted values: integers. Default value: 5000. Configuration example:

$("#my-als-list").als({
	interval: 4000
});

direction (string)

It defines the scrolling direction when autoscroll is set to "yes".

Accepted values: "left" and "right" (if orientation is "horizontal"), "up" and "down" (if orientation is "vertical").
Default value: "left" ("up"). Configuration example:

$("#my-als-list").als({
	direction: "down"
});

start_from (number) [new v.1.1]

Sets the first visible items in the list.

Accepted values: integers. If the value is greater than the difference between the total number of items and the number of visible items, it is automatically reset to 0.
Default value: 0 (first element). Configuration example:

$("#mio-contenitore").als({
	start_from: 2
});

7. Multiple option example

In this example we have 4 visible elements, the scrolling step is 2, list orientation is horizontal, list scrolling is infinite (circular) and starts automatically (autoscroll), the interval is 6 seconds, the scrolling direction is right and the first visible item is the second of the list.

$("#my-als-list").als({
	visible_items: 4,
	scrolling_items: 2,
	orientation: "horizontal",
	circular: "yes",
	autoscroll: "yes",
	interval: 6000,
	direction: "right",
	start_from: 1
});

8. Known problems

It is not possible to put an ALS list inside another ALS list.
The actual code can be further optimized using service functions.

Downloads

Production [8.46 Kb]

Only the ALS code, no frills, minified and ready to be inserted in your code

DOWNLOAD v.1.1

Download previous version [v.1.0]

Development [47.6 Kb]

ALS code not minified and heavily commented: to modify and hack as you wish

DOWNLOAD v.1.1

Download previous version [v.1.0]

Demo [306 Kb]

Both code versions and a demo page to be used as a basis for your projects

DOWNLOAD v.1.1

Download previous version [v.1.0]

Support & Contacts

Would you like a custom ALS version?

Did you find a bug or would you like to suggest us a modification or a new feature?

Would you like to discuss with us your new web project?

Send us an email, contact us on Twitter or use this form, we'll be happy to talk to you!

email musings@musings.it

@musingspuntoit

Did you like ALS?

Help us spread the word!

Buy us a coffee

Would you like to see other jQuery plugins by musings.it?

We developed an HTML5 content slider: μslider

We developed a magnifying glass: mlens

ALS in the wild

Who liked ALS so far

21.01.2013 ALS was featured on y2graphic.com
19.01.2013 ALS was reviewed by designyourway.net
18.01.2013 ALS was reviewed by designbeep.com
12.01.2013 ALS was reviewed by splashnology.com
07.01.2013 ALS was reviewed by skytechgeek.com
31.12.2012 ALS was listed among the best 2012 plugins by amazingthins.in
26.12.2012 ALS was reviewed by the japanese blog open-open.com
26.12.2012 ALS was reviewed by the japanese blog iteye.com
19.12.2012 ALS was reviewed by juliusdesign.net
18.12.2012 ALS was listed among the best 2012 plugins by moretechtips.net
10.12.2012 ALS was listed among the Dicember news for designers by webdesignerdepot.com
10.12.2012 ALS was listed among the best 2012 jQuery plugins by the japanese blog w3cplus.com
07.12.2012 ALS was reviewed by the greek blog wdf.gr
06.12.2012 ALS was reviewed by webification.com
06.12.2012 ALS was reviewed by jquery-plugins.net
05.12.2012 ALS was reviewed by webresourcesdepot.com
30.11.2012 ALS was featured on the russian blog habrahabr.ru
29.11.2012 ALS was featured on designs.zfort.net
27.11.2012 ALS was featured on the cinese blog crazyfrom.com
27.11.2012 ALS was reviewed by 9px.ir
27.11.2012 ALS was featured on templates.com
27.11.2012 ALS was reviewed by art2code.com
26.11.2012 ALS was reviewed by front-endmagazine.com
26.11.2012 ALS was featured on designbeep.com
26.11.2012 ALS was reviewed by the Korean blog webstoryboy.tistory.com
26.11.2012 ALS was reviewed by dailysyntax.com
26.11.2012 ALS was featured on the French blog lafermeduweb.net
26.11.2012 ALS was reviewed from the Italian blog fedeweb.net
25.11.2012 ALS was reviewed from codevisually.com
22.11.2012 ALS was featured on the Japanese blog gunosy.com
21.11.2012 ALS was reviewed by the Japanese blog phpspot.org
20.11.2012 ALS was listed in the js script list by webscripts.softpedia.com
20.11.2012 ALS was reviewed by Greepit.com
19.11.2012 ALS was featured on jQuery Rain
18.11.2012 ALS was reviewed by creativeproject.wordpress.com
12.11.2012 ALS was reviewed by jquer.in

ALS working in the web

Are you using ALS in a live project? Send a link and a screenshot of ALS at work to musings@musings.it, we will insert it in this section!

B&B Villa Sant'Andrea

Landi Marbles

Rubini Firma Wrist Watches

Bigodino magazine

Spider@Lecco Project

ALS customized

Are you a developer? Did you tweak ALS to your needs? Send us your version: we will try it and maybe link it in this new section!

10.03.2013 ALS v.1.0 customized by Benjamin by adding easing controls for the animation [download]
28.02.2013 ALS v.1.0 customized by Quentin by adding an easingOptions option [download]