Nivo Slider: playing with transitions

Published: May 4, 2012  By: Pascal  
A new way for rotating Nivo Slider's slides!
Thanks to Javascript functions, you can easily benefit from some unusual transitions tweaks for your
jQuery Nivo Slider and this article will give you the corresponding lines of code to insert into the HTML.

No need to know anything about coding, it is very easy to adapt the tips to make a custom behaviour for
your slider.

Furthermore, a live demo is provided at the end of the tutorial.

Enjoy!

Assigning a Specific Effect to the Prev/Next Buttons

Let's say you would like to get a different sliding direction when clicking on the Nivo Slider's direction
buttons.

A different transition can be applied depending on the right/left click on the arrows.

Just use (blue) the desired effect in the code below:

The HTML you must insert into the <head> section

<script type="text/javascript">
$('#NivosliderD0 .nivo-nextNav').live('mouseover', function() {
$('img').attr("data-transition","slideInRight");
});
$('#NivosliderD0 .nivo-prevNav').live('mouseover', function() {
$('img').attr("data-transition","slideInLeft");
});
</script>

Note: NivosliderD0 must be replaced by the ID of your slideshow

Changing Slides By Mouseover on Direction Arrows

Why clicking when we could only hover on the Prev/Nav buttons?

Only a small addition:

The HTML you must insert into the <head> section

<script type="text/javascript">
$('#NivosliderD0 .nivo-nextNav').live('mouseover', function() {
$('.nivo-nextNav').trigger('click');
});
$('#NivosliderD0 .nivo-prevNav').live('mouseover', function() {
$('.nivo-prevNav').trigger('click');
});
</script>

Note: NivosliderD0 must be replaced by the ID of your slideshow

Combining Both Effects on the Nivo Slider

This is what the below Demo shows:
Each time you hover a navigation arrow, the images rotate with a unique transition effect!

The HTML lines you must add in the <head> section

<script type="text/javascript">
$('#NivosliderD0 .nivo-nextNav').live('mouseover', function() {
$('img').attr("data-transition","slideInRight");
$('.nivo-nextNav').trigger('click');
});
$('#NivosliderD0 .nivo-prevNav').live('mouseover', function() {
$('img').attr("data-transition","slideInLeft");
$('.nivo-prevNav').trigger('click');
});
</script>

Note: NivosliderD0 must be replaced by the ID of your slideshow

DEMO
 
Example-Nivo-1 Example-Nivo-2 Example-Nivo-3 Example-Nivo-4
Thanks for reading and hope this helped!

• Downloads

> demo CSS file
Fin article