Adding proper sliding effects to jQuery slideshow plugin ‘NivoSlider’

The Nivo Slider jQuery plugin by Dev7studios is a free slideshow gallery. It provides lots of fancy transition animations such as fade-in, fade-out or cutting the image into moving slices. For my site, I just want a simple sliding animation, that moves the image from the left or right edge of the slideshow box into the center. Nivo Slider already provides the effects slideInLeft and slideInRight. The slideInLeft effect looks great but the slideInRight animation is more like “growing” instead of “sliding”. We want to fix this, of course. So, this is a short tutorial on how to implement proper sliding effects.

Create your own transitions

Creating one’s own transitions is very simple thanks to just having to change a few CSS properties. In the following, you can find the slide-effect-function slideInFromRight — I altered the name so the original slideInRight effect stays untouched. Additionally I also wrote some lines for slideInFromTop and slideInFromBottom.

The original slideInRight effect fixes the image to the left and animates the width change from 0% to 100%. Instead of altering the width of the images, we simply position the image with position: relative and it’s top, right, bottom and right attributes at the very edges of the slideshow box, so it is no longer visible; then let jQuery smoothly reduce that offset to zero.

You can simply copy these snippets into your own Nivo Slider files or download the complete version including these effects right here.

[download id=”14″ format=”1″] demo

Update 5. March 2013

Version 3.2 is updated and fixed:

• demo.html: Put all initiating js method calls into the $(document).ready call, so they won’t get executed before the page is ready
• demo.html: Changed the deprecated jQuery live() from jQuery 1.7 to the proper mouseover() method
• updated the Nivo Slider source version to the current 3.2

slideInFromRight

else if(currentEffect === 'slideInFromRight')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': '0px',
		'opacity': '1',
		'left': '',
		'right': '0px'
	});

	firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({
			'left': '0px',
			'right': ''
		});
		slider.trigger('nivo:animFinished');
	});
}

slideInFromLeft

This effect is actually unchanged, but to avoid any confusions, I simply duplicated it under the effects name slideInLeft.

else if(currentEffect === 'slideInFromRight')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({ 'width': '0px',
		'opacity': '1',
		'left': '',
		'right': '0px'
	});

	firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({
			'left': '0px',
			'right': ''
		});
		slider.trigger('nivo:animFinished');
	 });
}

slideInFromTop

else if(currentEffect === 'slideInFromBottom')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': slider.width() + 'px',
		'height': slider.height() + 'px',
		'opacity': '1',
		'top': '-'+ slider.height() + 'px'
	});

	firstSlice.animate({ top: '0' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({ 'top': '0' });
		slider.trigger('nivo:animFinished');
	});
}

 slideInFromBottom

else if(currentEffect === 'slideInFromTop')
{
	createSlices(slider, settings, vars);

	firstSlice = $('.nivo-slice:first', slider);
	firstSlice.css({
		'width': slider.width() + 'px',
		'height': slider.height() + 'px',
		'opacity': '1',
		'top': slider.height() + 'px'
	});

	firstSlice.animate({ top: '0' }, (settings.animSpeed*2), '', function(){
		firstSlice.css({ 'top': '0' });
		slider.trigger('nivo:animFinished');
	});
}

foldReverse

Vincent created the proper counterpart to the fold effect: foldReverse. You can easily add his code from below to the javascript file.

Using different effects for the ‘next’ and ‘previous’ buttons

Another nice addition is the idea of different effects to the Previous and Next buttons of the slider for diversity and to semantically support the idea of going forward and backward in the slideshow.

Usually, Nivo Slider simply shows the defalt effect option — either a specific effect like fadeIn or random. But you can overwrite that directive for specific images by providing them with a data-transition attribute.

We want to rewrite the data-transition attribute depending on which button was clicked. The solution is simple. To the previous and next buttons, we bind a mouseover event, which changes the attribute to our preferred effect. We add an additional mouseout event to both buttons to remove the attribute from all images in the slideshow, so the gallery can proceed with its default animation.

jQuery('#slider .nivo-nextNav').mouseover( function() {
	jQuery('#slider img').attr("data-transition","slideInFromRight");
});
jQuery('#slider .nivo-prevNav').mouseover( function() {
	jQuery('#slider img').attr("data-transition","slideInFromLeft");
});
// remove the data-transition attribute on mouseout
jQuery('#slider .nivo-prevNav, #slider .nivo-nextNav').mouseout( function() {
	jQuery('#slider img').attr("data-transition", "");
});