Nivo Slider in Magento Front Page

Posted on Updated on

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

<reference name="head">
<action method="addJs">
<action method="addCss">

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
then add the following html and javascript

<div id="slider">
<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>
<script type="text/javascript">// <![CDATA[
jQuery(window).load(function() {
// ]]>

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.


105 thoughts on “Nivo Slider in Magento Front Page

    Richard said:
    May 9, 2011 at 11:25 AM

    Hello, I can’t get the nivo slider to work, unfortunately I keep getting an “XML data is invalid error”…any ideas?


      shakyaabiral responded:
      May 10, 2011 at 4:04 PM

      Please change the quote sign ” in ur code. change it to single or double quote. If u have copied the same code from the above tutorial, the browser seems to display the wrong quote sign. Chane it, it will work. hope it will help 🙂

    Richard said:
    May 20, 2011 at 12:46 AM

    Wow thanks for the help, it really is always something simple isn’t it. haha.

    I’m having another problem, prev and next buttons don’t seem to be working; I’m sure it’s a CSS issue, but I’m not sure what to do…any ideas?

    I appreciate your help thanks!

    Richard said:
    May 20, 2011 at 1:59 AM

    Haha never mind, I seemed to make it work. For any absolute Magento noobs who are reading this my problem was I didn’t change custom-nivo-slider.css to reference relative images in my custom theme.

    So my control nav in the css was: background:url(bullets.png)

    instead of: background:url(../images/bullets.png)

    …thanks very much for this blog post! Just got this slider working perfectly and it looks great on my homepage.

    Cory said:
    May 23, 2011 at 5:38 AM

    Hi, thanks for the great guide! I installed nivo slider and it shows all the correct files (jquery, nivo slider, etc) it when I go to “inspect element” into chrome, but I can’t get the slideshow to work! I updated scriptalicious and I installed jQuery by downloading jQuery, adding in the no conflict line, and renaming: jquery-1.2.6.noConflict.min.js and placing in js/jquery. I also added “js/jquery/jquery-1.2.6.noConflict.min.js” to page.xml. I then copy and pasted the code and put it in the place in the CMS.

    This is what happens:

    I even just tried installing the jQuery extension from Magento and it still doesn’t work! If you could help me fix this I’d be very very grateful, I really need a nice looking image slider.

      shakyaabiral responded:
      May 23, 2011 at 5:48 AM

      check for the quote sign ‘ or ” ” in ur content.
      the quote sign in the tutorial is weirdly displayed by the browser.
      retype the quote sign (‘ “) in ur content.
      I can see that your div slider is messy.
      inspect your slider div in firebug and you will see what i mean

        Cory said:
        May 23, 2011 at 2:54 PM

        Thanks for the quick response! Unfortunately even after replacing all of the quotes with the quote from my keyboard and even trying ‘ on everything, it still just displays two images. After that I checked in Firebug and nothing looked messy.

        shakyaabiral responded:
        May 24, 2011 at 4:28 AM

        jquery.nivo.slider.pack.js doesn’t exists in ur magento project
        check for the availability of the file in your project.
        go to page source and check for urself
        Check it thoroughly, man..

    Sheila said:
    July 13, 2011 at 6:18 AM

    Thank you so much for this tutorial! However I cannot seem to get the slider to display. All I see are the two images I linked to the slider in the script. Do you have any tips for me on how to solve that issue? Thank you! =)

      shakyaabiral responded:
      July 13, 2011 at 6:50 AM

      Ensure that you have followed the above steps correctly. its most probably either the js files are not properly included or you messed up with the js.

        Sheila said:
        July 13, 2011 at 7:01 AM

        The js files should be placed in the root js/nivo-slider folder right? Also when I check the source of the page I am trying to place it in is is actually loaded. So that should mean it should load the .js file correctly right? I did not change anything to the files, and uploaded them 4 times now exactly where the tutorial says to place them, also installed the jQuery plugin. Do you have some more tips on where to check? Thanks so much for the quick reply! =)

      shakyaabiral responded:
      July 13, 2011 at 7:12 AM

      check for any js errors in firebug console. I can’t tell what exactly the problem is from here. keep debugging 🙂

        Sheila said:
        July 13, 2011 at 8:23 AM

        Thanks for that! the only thing it shows is “jQuery is not defined” and the line is “jQuery(window).load(function() { ” any ideas where to fix this? Thanks !! 😀

    shakyaabiral responded:
    July 13, 2011 at 10:18 AM

    @sheila: you are having problems with jquery, use this easy extension to install jquery into your site through magento connect–jquery-base

      Spring said:
      September 26, 2012 at 6:26 AM

      I used Magento 1.7. How I can install this extension. I can’t install Magento connect 1.0. It shown “Could not resolve host: magento-community; Host not found” 😦

        Spring said:
        September 26, 2012 at 9:08 AM

        Hi, i installed it by manual. The slider shown. But when I opened on firefox in short time, I got an problem that the script stoped and I had to close my browser. Can you help me, guys.
        Thanks so much!

        shakyaabiral responded:
        September 26, 2012 at 1:18 PM

        A possible solution may be to use a single transition effect like fade only. the random transition setting of nivoslider seems to have raised the error.

    guest83 said:
    July 20, 2011 at 3:28 AM

    I don’t know what I am doing wrong, but not working.

    John Jones said:
    August 16, 2011 at 3:31 AM
    Jeroen said:
    August 24, 2011 at 3:26 PM

    Can you see what is wrong here? I’m on it the whole day 😦 Thanks in advance!

      shakyaabiral responded:
      August 24, 2011 at 3:34 PM

      You need to run jquery in noconflict mode, since magento uses prototype library.
      To do this, put this code somewhere before you call any jquery functions.
      just put this code before calling function nivoslider();

    ami said:
    August 26, 2011 at 4:50 AM

    Wow nice information you have here.Thanks for sharing this interesting blog. Actually google made searching of information easy on any topic. Well keep it up and post more interesting blogs.

    kathy campbell said:
    September 6, 2011 at 2:03 PM

    I have installed this slider and it does display the 3 images, but at lightning speed.

    How do I fix this issue.

      shakyaabiral responded:
      September 6, 2011 at 3:06 PM

      play with the nivoslider setttings in the file “jquery.nivo.slider.js” that you have included, the animSpeed: pauseTime might be the settings that you would have to change

    Kathy Campbell said:
    September 6, 2011 at 7:04 PM

    I tried adjusting the below to:
    animSpeed: 1500,
    pauseTime: 4500,
    No difference..

    The 1st slide shows up, followed quickly by the second one then blank.

    Kathy Campbell said:
    September 6, 2011 at 7:06 PM

    I found out what the problem was – Internet Explorer 9 !
    Once I opened it up in FireFox afer changing the above variables it works perfectly.

      shakyaabiral responded:
      September 6, 2011 at 7:18 PM

      Yea IE is alys annoying. I wish people would stop using it 😛

        shakyaabiral responded:
        September 6, 2011 at 7:21 PM

        Also don’t forget to hard refresh your page or clear cache, once you make changes to js/css.

    Abhishek said:
    September 18, 2011 at 5:21 AM

    I am trying to put the nivo slider but it is coming in main content area. Wheras i just want it between navigation bar and the main wrapper. Pls help

      shakyaabiral responded:
      September 18, 2011 at 6:38 AM

      create a new phtml template file and work on the layout updates, look at magento layout tutes for more help, that might help. if u put in the cms page its alys gonna come in the content area.

    Oliver Jon Cross said:
    September 19, 2011 at 9:48 PM


    I’m struggling to get it to load e.g. I am getting two images. I am loading the script as far as I’m aware but I’ve removed the HTML and Javascript for the time being as it’s a live site. Have you got any suggestions?



      shakyaabiral responded:
      September 20, 2011 at 4:20 AM

      make sure you are using jquey in noconflict mode and check your js

        Oliver Jon Cross said:
        September 20, 2011 at 8:30 AM

        Hi Shakyaabiral,

        Yes I was trying to understand this, do I add this to one of the Nivo JS files or is there some other code I should be adding it to. I can’t seem to find where I edit the JQuery file in Magento Go.



    shakyaabiral responded:
    September 20, 2011 at 8:42 AM

    jQuery.noConflict(); before executing any jquery functions

    and use “jQuery” instead of “$” sign
    like jQuery(‘#id’); instead of $(‘#id’);

    Oliver Jon Cross said:
    September 20, 2011 at 9:00 AM

    Do you know where in Magento you add this? I don’t know where in the admin I should add the noConflict code

      Oliver Jon Cross said:
      September 20, 2011 at 9:59 PM

      Ok for those that use magento go, it’s not as straight forward. You plug in the java in design but then you must also add jquery script and pull it in the xml of the page using:


      We don’t have plugins, my own issue is getting the images to load but considering this is CSS I should be able to work it out.

      Thanks again, there is very few magento go tutorials out there.

    Phil said:
    November 23, 2011 at 10:53 PM

    Worked great, thanks!

    Only one suggestion if you want to edit the original post. I followed the directions exactly, and in one place you reference jquery.nivo.slider.js, then later when you make the call you reference jquery.nivo.slider.pack.js.

    Might clear up some confusion, thanks again!

      shakyaabiral responded:
      November 24, 2011 at 5:11 AM

      Thankx for you suggestion.
      I have corrected it in the original post 🙂

    Mike said:
    November 29, 2011 at 1:17 AM

    Thanks for your post! Wondering if you could help me…It seems like the slider is installed but the images are not displaying properly. It only shows the top few pixes of each image…

    Do you think you could take a look and let me know what you think?

    Thanks so much!

    Raffaele Decarli said:
    November 30, 2011 at 6:58 PM

    thank a lot for ur sharing…
    i just a noob in magento and jquery too XD and i have a few problems. i see only the picture and the script doesn’t load, same of the other comment, i follow ur reply, but i don’t know what’s wrong.
    In firebug console i have this error:
    jQuery(“#slider”).nivoSlider is not a function
    i have installed jquery base extersion is right?
    can u help me?
    thank u so much

      shakyaabiral responded:
      December 1, 2011 at 4:57 AM

      It might be that you haven’t included the nivoslider.js . Check to see the page source if you can find nivoslider.js in your page.

    Raffaele Decarli said:
    December 1, 2011 at 8:38 AM

    no, in the page source there isn’t nivoslider.js load…
    but, in the design upload xml page i have write this:



    and i copy the file jquery.nivo.slider.js in the magento->js->jquery->nivoslider
    and also in magento->js->nivoslider…
    maybe he can’t find jquery.nivo.slider? but the source is correct i think…
    what could be the problem?

      shakyaabiral responded:
      December 1, 2011 at 8:43 AM

      write the correct file location in design upload xml, consider the js folder as the root. if its inside js->jquery folder then write

      web site design company said:
      September 14, 2012 at 1:11 PM

      This was great, thanks for your sharing… It was helped me so much

    Raffaele Decarli said:
    December 1, 2011 at 6:08 PM

    well i miss a – in the source path, and now nivo.slider.js is loaded in the script area of the page, but i have the same error…
    in the DOM area i have a problem with prototype.js and i read there is conflict between jquery and prototype, should be this the problem?
    PS: i have loaded the noconflict mode script well

    VanDai said:
    December 15, 2011 at 5:30 PM


    I installed it
    It’s ok, good

    but, I have a problem with firefox

    when I press Ctrl + U

    It shows many error at file js/prototype.js

    EX: element.attachEvent is not a function
    too much recursion: show error many time

    after it shows many time with that error, firefox will auto close

    could you help me, please?


    VanDai said:
    December 15, 2011 at 5:34 PM



    I press Ctrl + Shift + J to show error of firefox

    Dian Reytan said:
    December 18, 2011 at 10:02 PM

    I think i have installed everything properly in my magento store, but the result is a strange and messy behavior of the slider.
    difficult to explain.
    i tried different solutions, but couldn’t fix it.

    thanks in advance

    Dian Reytan said:
    December 19, 2011 at 9:34 AM

    i checked with firebug, but seems there are no missing scripts or errors.
    also cpu load seems high when page is displayed…
    Thank you, Abiral for your attention and help.
    Best regards

      shakyaabiral responded:
      December 19, 2011 at 9:39 AM

      I can’t tell exactly what problem you are having. it would be better if you provided me a link to it, then maybe I can have a look at your site.

    Dian Reytan said:
    December 19, 2011 at 9:45 AM

    cannot see it here?
    i have made a second homepage to show you.

    shakyaabiral responded:
    December 19, 2011 at 9:57 AM

    remove these 2 lines, where you have written

    and include the nivoslider css file well, check page source and click on the css link to see if it points to the necessary file

    Dian Reytan said:
    December 19, 2011 at 10:15 AM

    Great ! it was the css position as you said, but in your reply i cannot see the 2 lines you suggest to remove…i see only empty space…
    Anyway thank you very much

      shakyaabiral responded:
      December 19, 2011 at 1:03 PM

      seems like its finally working for you. good to see that 🙂

    Spawn said:
    December 20, 2011 at 2:45 AM

    Hello shakyaabiral,

    I just like to ask if there is a way to make the slider dynamic. I mean to dynamically fetch images on certain folders within the magento folder. Second is, do you know how to make a backend to control the slider. Like simple disable and enable sort of things?

    kind regards,

    shakyaabiral responded:
    December 20, 2011 at 5:52 AM

    There are lots of free magento extensions to manage the slideshow and images in magentocommerce website. Google and you will surely find one that you need.

    jr said:
    December 23, 2011 at 5:55 PM

    I tried this way but the javascript never kicked in. The images loaded, I followed the instructions, it just didnt work 100%. Anyway, this worked first go for me:

    Rupali said:
    December 27, 2011 at 5:54 AM

    Hello shakyaabiral,
    Good morning,

    I am learning magento. I have tried this script but i was getting these 3 errors :

    Error: jQuery is not defined
    Source File: http://localhost/magento-

    Error: element.attachEvent is not a function
    Source File: http://localhost/magento-

    Error: jQuery(“#slider”).nivoSlider is not a function
    Source File: http://localhost/magento-

    I have also used jQuery.noConflict();
    Please help me to solve these so that i can proceed further for continue my learning.

      Rupali said:
      December 28, 2011 at 6:29 AM

      Hello shakyaabiral,
      Good morning,

      Its working now, i have made it to resolved all the errors 🙂

        shakyaabiral responded:
        December 28, 2011 at 1:24 PM

        That’s the spirit, keep it up 🙂

        Alex said:
        November 18, 2012 at 5:39 AM

        Hello Rupali,
        I am facing problem with this line jQuery(‘#slider’).nivoSlider(); and it’s saying nivoslider not a function .can you help me asap.


    Kamal said:
    January 4, 2012 at 2:53 PM

    Hi all,

    I’ve implemented it. It runs, but it doesn’t run smoothly (flickering, sometimes unresponsive, sometimes paused etc)… I’ve debug the code and make sure that the problem comes from prototype.js of magento. Does anybody got the same problem with me? Reading all your comment, looks like you guys finally able to implement it wit no problem at all.

    I’ve googled my problem everywhere, but got nothing. The closest clue that I got is comment from VanDai on this thread asking about prototype got too many recursion. But I still have no idea how to check and fix this problem.

    I’ve also asked this problem on stackoverflow here:

    Jacek said:
    January 21, 2012 at 10:08 AM


    Everything should be up and runnning but I get an error:
    “cant find variable jQuery”

    Any ideas?

    sam said:
    January 27, 2012 at 11:58 AM

    The css file needs to go here I think : /skin/frontend/base/default/css/nivo-slider.css

    sam said:
    January 27, 2012 at 2:16 PM

    NB : I was having issues in IE and I kind of hacked it by wrapping a fixed height div around the slider content :

    etc etc

    katelowen said:
    February 11, 2012 at 6:22 PM

    I have installed according to your instructions and also the Mxperts jQuery extension and now the images are not loading properly:

    I think the problem may be in the js file – am I supposed to change every instance of the $ to jQuery? Do you already have an edited version of the js file that I could upload?

    Thank you

      shakyaabiral responded:
      February 12, 2012 at 2:09 PM

      no you don’t need to change every instance of the $ to jQuery in the included jQuery files. but you just need to make sure that whenever you use jquery in your template files or in the cmd wysiwyg editor use jQuery instead of $.

    hafiz haseeb said:
    February 23, 2012 at 8:00 AM

    nivo slider does not work in internet explorer using magento custome theme any idea?
    Except internet explorer slider working fine

    vaishali said:
    March 13, 2012 at 5:53 AM

    if you use this code….then images does not jitter when it uploads first time.


    vaishali said:
    March 13, 2012 at 5:54 AM


    Magento Developer (@magepsycho) said:
    March 26, 2012 at 6:38 PM

    Hi Mage Lovers!
    If you want an easy way, just creating new group for slider images and then adding images/slides to it then you can try the following great extension for Magento:

    You just need to add following code in your cms page / static block / cattegory / product page:

    {{block type=”jquerysliderspro/slider” identifier=”group-identifier-for-homepage-slider”}}
    In fact you can use unlimited no of sliders anywhere in frontend.

    Happy E-Commerce!

    Aryan said:
    May 21, 2012 at 10:52 AM

    i use this method to put jQuery slider in my magento template but i just see “loading” didnt get any slide effect or slider photo.


      shakyaabiral responded:
      May 21, 2012 at 11:00 AM

      Seems like you have not implemented it correctly, there are no images on your site for the slideshow

        Aryan said:
        May 21, 2012 at 11:02 AM

        i have image and i put image path correct way i don’t know where i wrong but it is so much important for me can help me that where i wrong?

        Aryan said:
        May 21, 2012 at 11:06 AM

        And Forgot about 1 top slider i just change something now in my site now you can check clearly with bottom slider i talking about

        Aryan said:
        May 21, 2012 at 11:37 AM

        Did you check?

        shakyaabiral responded:
        May 21, 2012 at 11:48 AM

        You haven’t included jquery in your site.

        Aryan said:
        May 21, 2012 at 11:57 AM

        ? can you tell me which 1?

        Aryan said:
        May 21, 2012 at 12:25 PM

        Hey Shakyaabiral

        i got solutions now its work thx

        you gr8 🙂

    Aryan said:
    May 21, 2012 at 11:36 AM


    John Cheong said:
    June 30, 2012 at 5:17 PM

    Thanks very much to @shakyaabiral, 🙂
    my site’s nivo slider running very well now.

    I took almost a day to fix all the problems that i facing with the above code,
    (well my english is not good, but i hope that i can give help for those newbie like me)

    1. for those who cant load the .js .css files. please beware in the ‘Layout Update XML’ put outside this .. 🙂

    2. make sure your site included jquery file .. (more info:

    3. include nivo slide css style (i get from demo/style.css, start from #slider) , remember to update into ‘Layout Update XML’.
    no idea why shakyaabiral dosent mention about this. 😛

    4. and last , make sure the slider running smooth, change $.fn.reverse = []._reverse; (more info:

    hope all this can help .. 🙂

      Alex said:
      November 18, 2012 at 3:55 PM

      I have been solved this issue,thanks for all help……..:D

    John Cheong said:
    June 30, 2012 at 5:19 PM

    1. i means put it outside ‘ ‘

    John Cheong said:
    June 30, 2012 at 5:26 PM

    why the left arrow can’t show.. i means put outiside 《!- –

    yaser said:
    September 22, 2012 at 2:08 PM

    hello i try this but my images not shown correctly in localhost itself.i followed all the above but nothing happened.pls help.

      shakyaabiral responded:
      September 22, 2012 at 2:38 PM

      check the firebug js console for any errors.

    kanishka1256anishka said:
    September 25, 2012 at 10:53 AM

    can u plz help me out
    my slider is not working

      shakyaabiral responded:
      September 25, 2012 at 11:38 AM

      try replacing you jquery.js file with the latest version of jquery. Don’t forget to include jQuery.noConflict(); at the end of the file.

        kanishka said:
        September 25, 2012 at 11:50 AM

        Thanks to your quick reply
        can u send me link of jQuery.noConflict(); becoz I can’t able to find this file

        shakyaabiral responded:
        September 25, 2012 at 11:56 AM

        just create a js file with content
        thats it.

        or write
        at the end of the jquery.js file.

        kanishka said:
        September 25, 2012 at 12:23 PM

        thanks ur reply

        I have created one js file and file name is jQuery-noConflict.js and I also call this file in head.phtml (app/design/frontend/default/themename/template/page/html) but its not working again
        u can see on url source file.
        plz help me plz

        shakyaabiral responded:
        September 25, 2012 at 12:29 PM

        replace your jquery.js file with the latest jquery.js
        download the latest jquery file from

        kanishka said:
        September 25, 2012 at 1:01 PM

        now its working fine thanks 4 ur great help. thanks a lot

    John said:
    September 27, 2012 at 4:07 AM

    I am Running the current version of magento, this must be for older versions, bc followed directions, and tried every scenario swapped =>(“)for (‘)Put in the no conflict just wont show, and I use the nivo a lot, magento just wont take it, If you have a more up to date step by step, or instructions a baby couldn’t mess up please email me, will keep searching and if i find the right one will post!

      Jccw said:
      September 27, 2012 at 6:25 AM

      may i have your url .. ? : )

    erma said:
    November 1, 2012 at 7:53 AM

    Hi, i followed all steps as described. But the thing is images for “next”,”previous” options are not rendering.

    Can you suggest me any possible reasons?

      shakyaabiral responded:
      November 1, 2012 at 8:54 AM

      this must be linked with the images mentioned in the css file for next and previous classes are missing or misplaced, check it through firebug.

      erma said:
      November 1, 2012 at 10:28 AM

      never mind! I got it…css problem…

        erma said:
        November 1, 2012 at 10:29 AM

        Thank u so much….I got it…same issue u mentioned

    Custos said:
    November 16, 2012 at 9:55 PM

    Easy, Clear and responsive – very good solution. Thanks man. Work perfect!

    Alex said:
    November 18, 2012 at 5:40 AM

    Hello everyone,
    I am facing problem with this line jQuery(‘#slider’).nivoSlider(); and it’s saying nivoslider not a function .can you help me asap.


    joanna said:
    January 23, 2013 at 11:41 AM

    thanks a lot!!!!! It works perfect

    deepak said:
    February 7, 2013 at 7:13 AM

    when I open my firebug it will automatically hang and there is message shows to continue or stop script so how can I resolve it

    andreidrutu said:
    April 5, 2013 at 2:37 PM

    Hello, I have managed to install all the files and run the script but it only displays a smaller frame/window with a scroll bar on the side instead of any animation. What might the glitch be ? (i have installed Jquery libs plugin and added the scripts manually) said:
    September 8, 2013 at 12:58 PM

    Try this extensions to get out of the hassle in implementing nivo slider.

    Checkout our extensions @

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s