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
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
