How can you change effect in Nivo Slider based off

Question

I want to change the transition effect on Nivo Slider based off of which button was pressed. Any ideas of how to accomplish this?

Update To clarify, I meant the next or prev button, not a button on the keyboard. What I'm looking for is if a person presses the next button, a slideToRight transition effect is called. If a person presses the previous button, a slideToLeft transition effect is called. Then icing on the cake would be if someone presses a specific slide, if it slides the correct direction. I love Nivo Slider, but I feel like these should be default choosable actions.

Answer 1

Per the nivo slider documentation here you can change the effect for each slide by adding a custom data attribute onto any or all of the images and it will override nivo's default transition:

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

You can alter this custom data dynamically by setting an event handler on the document body to look for a keypress 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 change to specific types of transitions based on the key pressed by adding some logic in, but this is the general idea. A working fiddle is here: http://jsfiddle.net/gregjuva/2ZXCp/

Answer 2

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>

Answer 3

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

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

Answer 4

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

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