How I created a rotating image slider for the Educator theme on my coursepage

I successfully created a rotating slider for my Moodle 2.5 site based on the excellent post by Gerrard Shaw on his blog: http://gshaw0.wordpress.com/2012/05/15/how-to-add-an-image-rotator-in-moodle-2-2/.

Gerrard's post made reference to the JQuery plugin named Easy Slider 1.7 found here: http://cssglobe.com/lab/easyslider1.7/02.html

If you follow Gerrard's instructions, you will be able to have an image slider in any part of your theme or coursepage. The instructions are top notch, as Gerrard explains the steps very well. I would advise you to read Gerrard's post thoroughly first. This Moodurian.blogspot.com post helps to give you the full picture.

For example, it took me quite a while to get the slider working on my site. One reason is that Gerrard forgot to mention that the easyslider.css file, found inside the styles folder, has code at lines 61 and 64 that need to be customised according to your website if you want your theme to display the "next and previous image" icons.

In the image below, I have typed in the exact location of the prev and next buttons on my Moodle 2.5 production site. Without this editing, the slider's next image and previous image buttons will not show up.

Download px.zip:https://dl.dropboxusercontent.com/u/17797520/moodle/pix.zip
Extract pix.zip file inside the main moodle folder. Do not extract the contents inside the theme folder!You will end up with <main moodle folder>/pix/<image files>and<main moodle folder>/pix/slider/<more files>

For your convenience, I've also made available for download the complete Educator theme folder with the necessary slider files inside it. The zip file also contains the necessary demo slide images. When extracted, all necessary files to make the slider work on the theme, are in place.

Download educator.zip:
https://dl.dropboxusercontent.com/u/17797520/moodle/educator.zip
The educator zip file contains the theme files (for my site with my banners and image stuff) plus the necessary slider code and files.

Lastly, I create an instance of the slider by using this HTML code inside a Moodle label resource

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

Well that's it! Now you can create your own image slider for your own theme. 

RegardsFrankie Kam

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!