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

前端 未结 3 1520
星月不相逢
星月不相逢 2021-01-07 13:10

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

相关标签:
3条回答
  • 2021-01-07 13:37

    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*/
            }
    
    0 讨论(0)
  • 2021-01-07 13:49
    $('.nivo-prevNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDown");
    });
    
    $('.nivo-nextNav').live('mouseover', function(){
         $('#slider img').attr("data-transition","sliceUpDownLeft");
    });
    
    0 讨论(0)
  • 2021-01-07 13:57

    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>
    
    0 讨论(0)
提交回复
热议问题