Nivo Slider workaround (not always sliding in one direction)

Question

Let me prefix this by saying how much I love this community here on stackoverflow, and its always a great help to view and questions here, so thank you very much!

Problem. Thus, I have a client who needs a slide show that can move images from the right side to> left if you press the right navigation arrow, and from left → to → right if you click the left arrow.

Currently, in the configuration documentation for the nivo slider (its the only thing that I really ever use), I cannot get anything but always sliding or always sliding to the left (slideInLeft, slideInRight).

In any case, for example, depict a click and run this animation method instead of the usual one?

Thanks in advance, Aleski.

Answer 1

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 2

I just noticed this question - I answered Chris a similar question , and this solution, I hope, will work for you too:

In the nivo slider documentation, 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:

 var $body = $("body"); var $images = $("img"); $body.on('keydown', function(e) { if(e.keyCode == 37) { // left $images.attr("data-transition","slideInLeft"); } else if(e.keyCode == 39) { // right $images.attr("data-transition","slideInRight"); } }); 

A working fiddle is here: http://jsfiddle.net/gregjuva/YJaVS/

Answer 3

I will fix this by placing the following code in the nivoRun function of the nivoRun file (immediately after initializing the currentEffect variable):

 if(settings.effect === 'slideInLeftRight') { if(nudge === 'prev') { currentEffect = 'slideInRight'; } else { currentEffect = 'slideInLeft'; } }; 

This code creates its own slideInLeftRight effect.

The slideInLeftRight effect will use the slideInRight effect when the prev button is pressed, and it will use the slideInLeft effect when the next button is pressed.

Use the slideInLeftRight effect as follows:

 <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'slideInLeftRight', ... }); }); </script>