Nivo Slider: Quick, Beautiful Drupal Slideshows
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.
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”.
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:
Using Nivo Slider
Go to Structure > Nivo Slider and you’ll be able to upload images:
Each image will show in a tab on the same page:
Upload several images and you’ll then be able to re-arrange them using the drag-and-drop handles on the left-hand side.
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
There’s also an Options tab in the top-right corner.
You can control the theme, the effects and the navigation for your slider.
Click Save configuration.
Go to Structure > Blocks and place the Nivo Slider block on your site:
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.
Serious bugs in IE!
This is the awesome slider i have seen, great work, thanks for sharing
Website
Designing Company in Delhi
It is so beautiful and amazing, thanks for sharing
i used it here
Website
Designing Company in Delhi
Awesome i am searching for this a long time, thanks for sharing
[url=aaramshop.com]Buy grocery online in Delhi[/url]
Any solution for ie….
[url=http://www.grabbestoffers.com/store/bluestone-jewellery-coupons-offers]Bluestone Coupons[/url]
Looks like Dev7 is charging for the slider now.
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]
Your steps worked like a charm!
mine is not working
Hi Biney
Are you using the same version of JQuery?
Thanks