Nivo Slider: Quick, Beautiful Drupal Slideshows

media_1375271038051.png

We often recommend the Views Slideshow module as a powerful way to create slideshows in Drupal.

However, Views Slideshow requires quite a lot of Drupal expertise. You need to understand Views, image styles and you often need some theming skills too. Our Views Slideshow class is over 20 videos long.

Nivo Slider is an alternative to Views Slideshow. It’s less flexible, but is far simpler to use and looks great straight out-of-the-box.

Nivo Slider is a hugely popular jQuery slider that’s been downloaded more than 2 million times. Originally designed for WordPress, it’s available as a Drupal module.

Let’s see how to use Nivo Slider on our sites.

Installing Nivo Slider

You’re going to need 3 modules to make Nivo Slider work:

Once those three are installed, you need to make an important change to jQuery update. We’re using that module because Nivo Slider requires version 1.7 of jQuery and Drupal doesn’t provide it by default.

Go to Configuration > jQuery update and set the jQuery version to 1.7.

media_1375270743200.png

We also need to install some files to make Nivo Slider work.

Go to http://dev7studios.com/nivo-slider/ and click the download button on the right-hand side.

Download the “jQuery Plugin v3.2”.

media_1375270076672.png

You’ll get a compressed folder called on nivo-slider3.2.zip.

Extract that folder and upload it to /sites/all/libraries/ on your Drupal site. The extracted folder will be called /nivo-slider/ and the whole folder structure will look like the image below:

media_1375270136549.png

Using Nivo Slider

Go to Structure > Nivo Slider and you’ll be able to upload images:

media_1375270181653.png

Each image will show in a tab on the same page:

media_1375270205988.png

Upload several images and you’ll then be able to re-arrange them using the drag-and-drop handles on the left-hand side.

media_1375270250054.png

Each image has a series of options including:

  • Title: this is the alt text for the slide image
  • Description: this text appears over the image
  • Link slide to URL: this will allow you add images to links
  • Show slide on specific pages: even if the slider appears on multiiple pages, you can control which pages individual slides appear on.
  • Transition: different styles for the slider
media_1375270355377.png

There’s also an Options tab in the top-right corner.

You can control the theme, the effects and the navigation for your slider.

media_1375270522744.png

Click Save configuration.

Go to Structure > Blocks and place the Nivo Slider block on your site:

media_1375270565087.png

Voila!. Your slideshow is ready.

One thing to note is that the Nivo Slider module only allows you to have one slider per site. This could be a little limiting for larger sites. You can get some flexibility by using the “Show slide on specific pages” option to create the appearance of having multiple sliders.

Overall, I was really impressed by Nivo Slider and its Drupal module. I predict we’ll be recommending it frequently as a quicker and easier alternative to Views Slideshow.

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bazinga! Web Design
Bazinga! Web Design
11 years ago

Serious bugs in IE!

Ajay bihani
Ajay bihani
10 years ago

This is the awesome slider i have seen, great work, thanks for sharing
Website

Designing Company in Delhi

Ajay bihani
Ajay bihani
10 years ago

It is so beautiful and amazing, thanks for sharing

i used it here
Website

Designing Company in Delhi

arvindseoonline
arvindseoonline
10 years ago

Awesome i am searching for this a long time, thanks for sharing
[url=aaramshop.com]Buy grocery online in Delhi[/url]

Grab offers
Grab offers
10 years ago

Any solution for ie….
[url=http://www.grabbestoffers.com/store/bluestone-jewellery-coupons-offers]Bluestone Coupons[/url]

mwbyrd
mwbyrd
9 years ago

Looks like Dev7 is charging for the slider now.

Michal
Michal
9 years ago

Hi
How to add zooming effect between transitions in drupal nivo slider?
Something like this: [url=http://www.soslignes-ecrivain-public.fr/Cool-tip-Ken-Burns-effect-for-your-Nivo-Slider.html]http://www.soslignes-ecriva…[/url]

mvsagar
mvsagar
7 years ago

Your steps worked like a charm!

Biney
Biney
7 years ago

mine is not working

steve
steve
7 years ago
Reply to  Biney

Hi Biney
Are you using the same version of JQuery?
Thanks

10
0
Would love your thoughts, please comment.x
()
x