Nivo Slider Installation


Nivo Slider provides an easy and eye-catching way to showcase featured content. Nivo Slider gives administrators three important tools:

  • A simple method of adding slides to the slideshow.
  • An administration interface to configure slideshow settings.
  • Simple slider positioning using the Drupal block system.


1. Install Libraries APImodule

2. Download the latest version of the Download Nivo Slider jQuery Plugin and extract it tosites/all/libraries or sites/sitename/libraries as you require. The extracted folder must be named nivo-slider.

3. Copy the Nivo Slider module to sites/all/modules or sites/sitename/modules.

4. Enable Nivo Slider module.

5: Add slides to the slideshow /admin/structure/nivo-slider.

6. Add block Nivo Slider to region 'Slideshow' in 'admin/structure/block.

7. Install jQuery Update Module and enable.
Go to modules -> jQuery Update -> Configure
Change jQuery version to 1.7



Video Tutorial


Anonymous's picture

I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I'm looking to construct my own blog and would like to find out where u got this from. many thanks

peter556's picture

I simply advise the to say I 'm initiate through to weblog and after this redundant darling true website. A good number of prepared Im planing to bookmark on to the website . You unquestionably have outstriping well written written content .

Jules Schmuker's picture

Nivo Slider is upscaling my images with Professional Pro theme. I have tried modifying the "image module" effects, but this doesn't help. They are supposed to be only 700 pixels wide by 428 pixels tall, but it is stretching them (to scale) to about 936 by 572.

Any ideas on how to change this so that it does not stretch?

admin's picture

You can crop image by using image editing tool.

henry's picture

I followed the Nivo Slider Installation Tutorial, after the step 5, the region Slidershow always only shows the loading.gif in a empty block! No images, no animation!
Then I tried to install Drupal 7 and Business Enterprises theme both in local server and remote host, still not work!

admin's picture

its may happen because of image size. Please try with different image.

jonah's picture

Thanks for the blog,
I have a little challenge ,i am new to drupal, trying to develop a site , i have followed all the instructions of installing nivo slider but when i go to display on home , images don't change/slide..ive tried to configure everything .

some one to help me out , need to do this project faster faster.
Thanks guys much.

n4rk0's picture

I had the same problem, my images were displaying vertically without any animation. Keep in mind there are 4 archives to download : librariesAPI, Jquery update, nivo-slider module and nivo-slider jquery plugin. I personnally forgot to download and install the last one, here is the way to fix this :

Download "" here : Open the archive and unpack the nivo-slider folder (choose the dedicated one if you're running a Mac OS) into sites/all/libraries. Now that the jquery plugin is installed, you should see some improvements...Btw if you have some animation problems, go to modules/Jquery Update/ "configure" and make sure you chose the correct one.

admin's picture


Only 3 simple steps is enought to configure nivo slider.
-> Install jQuery update
-> Install Nivo slide module
-> Install Nivo slider Library ( most of the users are missing this steps )
Download the latest version of the Nivo Slider jQuery plugin and extract it tosites/all/libraries or sites/sitename/libraries as you require. The extracted folder must be named nivo-slider

If you didn't install "jQuery Update" install "jQuery Update" module and -> Configure
Change jQuery version to 1.7

Now you can go to modules and cofigure browse and upload image. once you upload the image you will get title, decription, link fields

king's picture

all my images are just jquery effect is taking place at my slideshow block

admin's picture

Please add nivo-slider library in libraries folder.

Serken's picture

Fantastic! Thank you for sharing this, I've been trynig to work out how to add the bullets.If it helps anyone, when I moved the bullets so that they are over the picture I had to add z-index: 99; to the .nivo-controlNav css element, otherwise the next picture was displayed on top of the bullets.

Kaleigh's picture

And I was just wondering about that too!

Gloriane's picture

This is both setert smart and intelligent.

Rose Mckoan's picture

You made some decent points there. I looked on the web for more info about the issue and found most people will go along with your views on this site.

Bhupendra's picture

I've followed all the steps involved but all the images just display on the front page, no animation. Please is there anything I'm living out? Thanks and regards...

behrouz's picture

Thanks for your nice theme.
My slides has no animation automatically.although I have adjusted Animation speed at 5000 regards

Vlade's picture

Please how to resize Nivo Slider images when use mobile device?
Thanks in advance.

admin's picture

Default slider image should come 100% width in all device. or you can use media-query to write specific style

Gon's picture

Awesome! Glad that helped you out. I have also been piylang around with Twitters bootstrap and they have an image slide. I'm hoping to have things figured out with it as well to give people two different options Thanks for the addition of the z-index too! You rock!

Cassie's picture

Super excited to see more of this kind of stuff online.

jhonny's picture

i already upload 3 images, but the slide is not working. The web still always display 1 images. is there any customization for this issue?

admin's picture

Download the latest version of the Nivo Slider jQuery plugin and extract it tosites/all/libraries or sites/sitename/libraries as you require. The extracted folder must be named nivo-slider.

Rob Britton's picture

I would like a different Nivo Slider for each of my distinct pages. Is that possible?

admin's picture

Use view slideshow module ( to make different slider.

Digambar's picture

thanks bro

Ann's picture

You explained the steps clearly...

Matthew's picture

Sorry I'm new to Drupal. How can I display text left to the animated images the way it has been done in the lexi theme. I installed the lexi theme but the animated image takes up the whole width of the page.

Shams's picture

It is a great tutorial. You have done a great job

Amandeep Singh's picture

Hi Admin,
Thanks for such a wonderful tutorial. Please check as the link for downloading the said plugin is not available. It will be so nice of you if you can provide new link for mail me the plugin at
Thanks a Ton in advance.

Renato's picture

The link to: "Nivo Slider jQuery plugin" does not work.

Mr Ireto's picture

Whenever I enable the nivo slider my installation hangs up. I cannot see the admin bar anymore. Any ideas. I am using drupal 7.24. Initially I can see the modules page and I can see the slider enabled, but I do not see the help or permissions links as shown above. I do see the configure link. But when I try to add am image and then return to the page my problems start. I can return to normal only when I delete the slider module.

admin's picture

You can see slide configure module on right side of the banner.or you can directly go to modules->nivo slider and configure.

admin's picture

@Renato updated 'Nivo Slider jQuery plugin' URL.

For image re-size.
You can resize image manually and upload through nivo-slider module.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.