CODEWITHSUNDEEP
jquerycarouselnivo-slider
Chris
Chris

Reputation: 644

How can you change effect in Nivo Slider based off of previous or next slide keypress?

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.

Upvotes: 0

Views: 5784

Answers (3)

Jeno
Jeno

Reputation: 11

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>

Upvotes: 0

lgabster
lgabster

Reputation: 715

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

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

Upvotes: 5

Severe Torture
Severe Torture

Reputation: 319

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*/
        }

Upvotes: 0

Related Questions