Nivo Slider: Quick, Beautiful Drupal Slideshows

| Drupal

media_1375271038051.pngWe 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.


About the author

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.