jQuery Plugins › jQuery CSS3 & Html5 Plugins › Any List Scroller

ALS - Content Scrolling Plugin With jQuery

File Size: 304 KB
Views Total: 6739
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE8+, FireFox, Opera, Safari#scroller
ALS - Content Scrolling Plugin With jQuery

ALS (Any List Scroller) is a jQuery plugin that can be used to scroll any elements on the page (text,image,list...). By using thi plugin, these elements can be scrolled either horizontally or vertically.

How to use it:

1. Files to include in the <head> section:

<!-- 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.min.js" ></script>

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

2. The necessary styles for the scroller.

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

.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;
}

3. The HTML structure for the scroller.

<!-- 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 -->

4. Basic inizialization

$(document).ready(function(){
  $("#my-als-list").als();
});

5. Possible options to customize the scroller.

// visible-items (number)

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

// scrolling-items (number)

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

// orientation (string)

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

// circular (string)

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

// autoscroll (stringa)

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

// interval (number)

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

// direction (string)

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

6. All default plugin options.

visible_items: 3,
scrolling_items: 1,
orientation: "horizontal",
circular: "no",
autoscroll: "no",
interval: 4000,
speed: 600,
easing: "swing",
direction: "left",
start_from: 0

Changelog:

2014-09-28

This awesome jQuery plugin is developed by musings.it. For more Advanced Usages, please check the demo page or visit the official website.