Simple MooTools 1.2 Image Slider/News Ticker

For my début post I'd thought I'd share a little JavaScript class that I created for a client that is small, easy to implement and edit. This MooTools script has the ability to rotate images and text without stopping or returning to the start of the list unlike a lot of other news/image tickers around. The slider will stop while the mouse is over and resume scrolling when the mouse is not hovering over. There are 4 parts to integrate this to your website.

The Code

First things first we need to include our MooTools Framework and the Simple Slider/Ticker Class. This is done simple by inserting this code into the head section of the webpage.

 

Next we need to add the stylesheet that controls the layout of the slider/ticker. By changing the #splash height and #slider-list li width you can control how many items will appear at any one time

 

After you have added the stylesheet we are ready to add the main html part of the slider/ticker. In the body of the page where you want the ticker/slider to appear add

   
           
  •        
  •        
  •        
  •        
  •        
  •        
  •        
  •    

Now if you load your page you should hopefully find the the ticker/slider will now appear on your page, but will not be sliding. To make it slide we need to activate the class. To do this add this code into your head section of the page. You will notice that transition/duration is set to 5000 which means it will take 5 seconds for an image to slide. You can change the speed of the rotation by increasing or decreasing this value. You also have the ability to change the transitioneffect by editing the transition option by using one of the MooTools Transition Effects


Once you have added the script load up your page again, The Slider/Ticker should now be sliding automatically. Your Done!

Example and Download

You can view an example of this slider/ticker by visiting this page: Simple News/Image Slider

You can also download the example here (62kb Zip)