What is DSS?

Dynamic Slider Script (DSS for short), is a lightweight (4kb) customizable addon for the MooTools library, created with designers in mind.

This script will slide between blocks of content, contained within a div that becomes the 'viewport'. It is designed to handle any number of items, any number of rows or columns, can go vertical or horizontal, can contain most content types, and is largely customizable.

Since the design and contents are up to you, it is also possible to combine this script with other utilities based on MooTools 1.2.x

Examples

Downloads

You will need the MooTools 1.2.x library, including the FX extension. If you already have this, awesome. Otherwise, a full version is included in our download. You can also visit MooTools' website for a more customized file (www.mootools.net)

The zip below contains all the files you will need for DSS. "dssConfig.js" contains all customizable information, "dss.js" is the core script, plus "mootools.js" the library. It is recommended to keep all your js files in a subdirectory (such as the one provided).

2/2/09 - Dynamic Slider Script v1.1 (.zip)

How To Use

Step 1.

Extract the files above to your web server and insert the following script tags into the head of your web document. Make sure to correct the paths to wherever your files are located. The scripts must be loaded in this order!

Step 2.

Create the following blocks of html where you want the scroller to be. Create a unique id name for identifying this slider block. The "dssWrap" class name must stay the same.

The "dssWrap" div constrains the viewable slider area with a fixed width and height, so you will need to define values for these dimensions. Only the sliding content will go in this div, any other html for design or functionality should go outside of "dssWrap".

Step 3.

Now put in your content elements! We'll be using unordered list elements to wrap each content item. As of version 1.1, it must be a <ul> wrapper.

Although not yet fully tested, any content you place inside the li elements should work. If you find any content types that do not work in v1.1, please leave some feedback!

Step 4.

Now we'll add the NEXT and PREV buttons/links. All you need to do is apply the class names "dssPrev" and "dssNext" to two different elements (such as <a> tags).

Make sure these elements are outside of the "dssWrap" div, but they must be contained inside the "unique_id" wrapper for unique targetting.

Step 5.

Edit the "dssConfig.js" file in your favorite app. This file contains all the settings to control the scrolling viewspace. Below is an example...

Configuration Info

Property	Value	Default	Required
"unique_id":	Replace "id_name" with your unique id for the parent div	none	Yes
direction:	"vertical" or "horizontal"	"vertical"	Yes
width:	This is the width of the viewspace (div id "dssWrap")	none	Yes
height:	This is the height of the viewspace (div id "dssWrap")	none	Yes
items:	How many items are viewable per scroll?	none	Yes
continuous:	"on" or "off" , first and last pages will cycle back and forth	"off"	No
slidespeed:	milliseconds (1000 = 1 second)	900	No
slidemode:	Transition effect: "cubic", "quart", "circ", "sine", "bounce", or "elastic"	"quart"	No
rollover:	"on" or "off" to enable the opacity rollover effect	"off"	No
rollopacity:	0 to 100 for percent of opacity state	70	No
rollspeed:	milliseconds (1000 = 1 second)	400	No

NOTE:  Items that are indicated as not required can be excluded from dssConfig.js and will use the default values.

Step 6 (optional).

To make more than 1 sliding content box, just repeat the above steps! Make sure to use new unique id names for each new box. Below is an example of the "dssConfig.js" file using 2 dss boxes on the same page...

Also notice I chose to allow defaults for some of the optional parameters by simply excluding them.

Enjoy!

Stay tuned for an even better version, hopefully soon.
Also coming soon, jQuery version.

Current Version Notes: v1.1

• Added "continuous" mode
• Config options added for slidespeed, slidemode, and rollspeed
• Utilizes ul and li for cleaner html
• Plenty of room for creative css design

Future Version Ideas: v1.2

• Pagination
• Automatic cycle

Donate

If you feel generous, any donations are greatly appreciated. DSS is provided completely free, and all future versions will remain free as well. Thanks!

Feedback