Characteristics demotop

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

Version

Version v.1.7 date: 17.09.2014 - minor bug fixes on configuration controls and timeout reset on click for autoscroll

Version v.1.6 date: 17.06.2014 - minor bug fix on "swipe" for non circular scrolling

Version v.1.5 date: 21.05.2014 - minor revision of "destroy" method and touch support

Version v.1.4 date: 25.03.2014 - added "swipe" support for touch devices

Version v.1.3 date: 04.02.2014 - added "speed" and "easing" options; various minor changes

Version v.1.2 date: 04.09.2013 - "destroy" method rewritten for single instance management

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 under the terms of the MIT license



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 instructionscharacteristics

Demo 1

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

prev
  • orangeorange
  • appleapple
  • bananabanana
  • blueberryblueberry
  • watermelonwatermelon
  • cherrycherry
  • strawberrystrawberry
  • avocadoavocado
  • pearpear
  • pineapplepineapple
  • papayapapaya
  • raspberryraspberry
next

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

prev
  • orangeorange
  • appleapple
  • bananabanana
  • blueberryblueberry
  • watermelonwatermelon
  • cherrycherry
  • strawberrystrawberry
  • avocadoavocado
  • pearpear
  • pineapplepineapple
  • papayapapaya
  • raspberryraspberry
next

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

prev
  • orangeorange
  • appleapple
  • bananabanana
  • blueberryblueberry
  • watermelonwatermelon
  • cherrycherry
  • strawberrystrawberry
  • avocadoavocado
  • pearpear
  • pineapplepineapple
  • papayapapaya
  • raspberryraspberry
next

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 (new from v.1.1)

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

prev
  • orangeorange
  • appleapple
  • bananabanana
  • blueberryblueberry
  • watermelonwatermelon
  • cherrycherry
  • strawberrystrawberry
  • avocadoavocado
  • pearpear
  • pineapplepineapple
  • papayapapaya
  • raspberryraspberry
next

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 downloadsdemo

1. Structure

ALS 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.6.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 (string)

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 from 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:

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

speed (number)   [new from v.1.3]

Sets the scrolling speed (in msec).

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

$("#my-als-list").als({
	speed: 400
});

easing (string)   [new from v.1.3]

Sets the easing function for the scrolling animation.

Accepted values: "swing" and "linear". Default value: "swing". Configuration example:

$("#my-als-list").als({
	easing: "linear"
});

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 speed is 400 msec, the easing function for scrolling animation is "linear", 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,
	speed: 400,
	easing: "linear",
	direction: "right",
	start_from: 1
});

8. Known issues

Downloads contactsinstructions

Production [15.7 Kb]

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

DOWNLOAD v.1.7download

Download current version [v.1.7]

Download previous version [v.1.6]

Download previous version [v.1.5]

Development [64.9 Kb]

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

DOWNLOAD v.1.7download

Download current version [v.1.7]

Download previous version [v.1.6]

Download previous version [v.1.5]

Demo [303 Kb]

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

DOWNLOAD v.1.7download

Download current version [v.1.7]

Download previous version [v.1.6]

Download previous version [v.1.5]


Would you like to help us?

ALS was born as a jQuery plugin released for free and we wish it were always so! Did you like it? Is it useful for one of your projects? Consider donating!

Any amount will help us maintaining and enhancing ALS code, adding new features and keeping ALS free for everyone. Thank you! :)


Support & Contacts inthewilddownloads

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

twitter @musingspuntoit





Did you like ALS?

Help us spread the word!

buy us a coffee Buy us a coffee




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

We developed an HTML5 content slider: μslider and its brand new compact brother Minimus slider (mini muslider)

We developed a magnifying glass: mlens

We developed a wonderful jQuery countdown: MCountDown

Have a look at our portfolio on Envato

ALS in the wild contacts

Who liked ALS so far


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!





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!