Since using Moodle as our primary website one of the things I’ve been asked for a lot is to tidy up our front page and make it a bit less “blocky”. Problem is we still need to provide an area for notifications of new courses, events etc of which there can be 4-5 at a time.
Having seen a few websites that employ a sliding banner rotator I wondered if the same could be done in Moodle, intially leaving it as something I’d get someone else to do to save time. However since playing with the new aardvark release a couple of days ago I decided to give it a try… the results are rather pleasing 
Note: make sure your site is in Theme Designer mode or remember to Clear Theme Caches after updating the file structure and config.php or your changes won’t take effect!
Here’s one I made earlier…
Yes I’ve been naughty and let the browser remember the site admin password… panic over it’s only my local Wampserver 
Finding a suitable base…
A quick Google found this… Easy Slider
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
What you get in the download is a couple of .js files, some CSS and sample HTML files to work from… time to integrate this into the aardvark theme.
Step 1… create the file structure
Ref: http://docs.moodle.org/dev/Themes
First thing you need to do is add the .js files into your theme. This is nice and easy with Moodle 2. Open your theme’s root folder, you should see folders such as pix, style, lang etc. If it doesn’t already exist create a folder called javascript and place jquery.js and easySlider1.7.js in there.
I renamed easySlider1.7.js to easyslider.js as I don’t trust mixed case or punctuation in file names as a general rule… keep it all lowercase and make life easy for yourself
Create an additional .js file in the javascript folder called enableslider.js and paste the following into it…
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
(you’ll notice this is the code from the Easyslider example files)
Next, rename and copy my updated CSS file (grab it from the SkyDrive link on the right) into the style folder in your theme (I called the renamed file easyslider.css) There’s some extra code (mainly for the demo pages) that isn’t required so I’ve removed it and also renamed the first 3 div IDs to be on the safe side so they won’t conflict with anything in Moodle.
Finally, create a folder called slider within the pix folder in the root of your Moodle installation (not theme folder). At the moment I’ve hard-coded the links to the slider images, not ideal and something I’ll look at changing when I have time. Copy in the sample files 01.jpg, 02.jpg, 03.jpg, 04.jpg, 05.jpg.
Optional: create a subfolder within pix/slider called controls and copy in btn_prev.gif and btn_next.gif if you want to try arrow instead of numeric navigation (let me know your results as they might not be pretty!)
Step 2… tweak config.php
Now you’ve got the files there let’s enable them. Open up config.php in your text editor of choice (I’d recommend Notepad2 )
Enable the CSS file by adding it to the sheets array… note you don’t have to put the file extension at the end
$THEME->sheets = array('core', 'autohide','easyslider');
////////////////////////////////////////////////////
// Name of the stylesheet(s) you've including in
// this theme's /styles/ directory.
////////////////////////////////////////////////////
Enable the Javascript functions by adding this to the bottom of the file…
////////////////////////////////////////////////////
// An array of additional Javascript files
// for image slider
////////////////////////////////////////////////////
$THEME->javascripts_footer = array(
'jquery','easyslider','enableslider'
);
Step 3… change the settings to suit your needs
Open up the javascript/easyslider.js file with your text editor and change the settings for continuous, auto, speed etc to suit your needs. The author’s website has full documentation on what each setting does. At the moment I’m using the numeric mode so set that to true (you can try the arrow navigation buttons but not sure how they’ll look!)
Open up the style/easyslider.css file with your text editor and change colours and the overall width of the rotator as required. By default the width is set to 674px so just find \ replace all instances of that to make the change. Obviously you’ll need to make sure your images match the width set for the rotator or it’ll look a bit odd!
Step 4… paste in the code
Choose where you want your rotator to go (usually front page), open up the Moodle HTML editor and switch to code mode. Position the cursor where you want the slider to be and paste this in…
Note the hard-coded paths to images in the site’s pix folder… if \ when I sort this I’ll update the post accordingly
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/01.png" alt="Image 01" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/02.jpg" alt="Image 02" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/03.jpg" alt="Image 03" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/04.jpg" alt="Image 04" /></a></li>
<li><a href="http://templatica.com/preview/30"><img src="http://yourmoodlesite.com/pix/slider/05.jpg" alt="Image 05" /></a></li>
</ul>
</div>
Hit refresh and you should see your rotator appear!
