Here is a simple tutorial which will teach u how to put a slider on ur frontpage of a magento site.
I’m using nivo slider for this instance
First Download Nivo Slider from here
After that u upload the files from the downloaded pack to ur server as listed below
1) jquery.nivo.slider.js to root_dir/js/nivo-slider
2) nivo-slider.css to dir_to_your_theme/css/nivo-slider.css
eg. destination folder “root/skin/frontend/default/default/”
3) similarly upload the required images to the images folder of ur theme folder like dir_to_your_theme/images/arrows.png, etc..
Finally all things are finally uploaded to the server and now we are ready to design our front page.
Goto admin panel then goto Cms->pages link on the admin panel and select the homepage from the list on the following page..
now lets tell magento to add the required js and css files in the front page. to do that click the “design” tab on the left menubar
then on the “layout xml update” input textarea add this
After doing this the js and css files that we uploaded in our server will be loaded when front page is viewed on the browser. You can check for that by refreshing ur front page and viewing the page source and see the there are links to the js and css files and the content of the files appears on clicking them on the “page source” page.
Now its time to build the slider..
Go to the “content” tab on the left menubar
Click “html” from the wysiwyg editor options on the page
<a href="#"> <img title="This is caption1" src="slider1_image_url" alt="" /> </a>
<a href="#"> <img title="This is caption 2" src="slider2_image_url" alt=""/> </a>
Tips: one way to input image url would be, to use the wysiwyg editor to upload your slider images, then insert it into the content area. the editor outputs the image’s url while we view in the html view. so from there u can grab the image url and put it in the above html code
Note: Magento uses prototype js library in default installation and we need jquery library for running this slider. So install the jquery extension for magento from the magento community. Moreover when using jquery in magento, remember we are using it in no-conflict mode so don’t forget to use “jQuery” instead of the usual “$” sign.
eg. $(‘#div_id’).hide(); is used as jQuery(‘#div_id’).hide();
Hope this tutorial was beneficial for you.