08 April

Modifying Frontpage Widget Slider


Many people wonder how to modify the Frontpage Widget/Slider to either make it slower, faster etc..  It is in fact rather straight forward. We will start first by opening up ” skin/frontend/default/<yourtheme>/slider/js/slider.js”


It may look complicated but in reality its only a few bits of coding that needs to be adjusted to your liking.

When opened go to around line 32:

Here are the things you can customize (with their default values):


By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.

controlsBefore and controlsAfter

In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.


By default set to true. If set to false it will disable button hiding when slider reaches the end.


By default set to false. If set to true the images will slide vertically instead of horizontally.


This option is set in milliseconds and it represent the speed of each slider. The greater the number the slower the image will slide, the lower the numbers the faster the image will slide.

firstShow and lastShow

These parameters hide (or show) “go to first” and “go to last” buttons


This option enables auto sliding, Just set it to true.


This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding


If set to true clicking the next button when the slider reached the end will jump to the beginning (and vice-versa). Combining this option with auto (both set to true) you’ll get endless animation

Hope that helped and stay tuned for some more great HOWTO and Tutorials!

Back to Top