How can you change the effect in Nivo Slider based on previous or next slide?

Question

I want to change the transition effect to the Nivo Slider, on the basis of which the button was pressed. Any ideas on how to do this?

Update To clarify, I had in mind the next or previous button, not the button on the keyboard. I am looking for if a person presses the next button, the slideToRight transition effect is invoked. If a person presses the previous button, the slideToLeft transition effect is invoked. Then the icing on the cake will be if someone clicks on a particular slide, if it slides in the right direction. I love the Nivo Slider, but I feel that these should be the default step-by-step actions.

Answer 1

$('.nivo-prevNav').live('mouseover', function(){ $('#slider img').attr("data-transition","sliceUpDown"); }); $('.nivo-nextNav').live('mouseover', function(){ $('#slider img').attr("data-transition","sliceUpDownLeft"); }); 

Answer 2

In the documentation for the nivo slider here, you can change the effect for each slide by adding a user data attribute to all or all images and it will override the nivo default transition:

 <img src="images/slide1.jpg" alt="" data-transition="slideInLeft" /> 

You can change this user data dynamically by installing an event handler on the body of the document to find the keystroke, and then change the attr of all the images using the snippet below:

  $('body').on('keypress', function(){ $('img').attr("data-transition","slideInLeft"); }); 

You can get more advanced and go to certain types of transitions based on a keystroke by adding some logic, but this is a general idea. A working fiddle is here: http://jsfiddle.net/gregjuva/2ZXCp/

Answer 3

Add this to “jquery.nivo.slider.js” before the comment “// Run effects” after the comment and code in “// Custom transition, as defined by the“ data transition ”attribute. This shows the change in the current effect if you click on the arrow left or right or buttons. For this to work, you must have imageis in HTML without the attribute "data transition" and the default effect, which you must define in "jquery.nivo.slider.js" in the comment "// Default settings" , because the attribute "data transition" is preferable. I know it correctly for my project.

  if(nudge === 'prev'){ currentEffect = 'slideInLeft'; } else if (nudge === 'next'){ currentEffect = 'slideInRight'; } else if (nudge === 'control'){ currentEffect = 'fade'; /*test*/ } 

Answer 4

Using button

 <script type='text/javascript'> $(document).ready(function() { jQuery("#previousButton').click(function (e) { e.preventDefault(); jQuery(".nivo-directionNav .nivo-prevNav").click(); }); jQuery("#nextButton').click(function (e) { e.preventDefault(); jQuery(".nivo-directionNav .nivo-nextNav").click(); }); }); </script>