Nivo Slider sliding workaround (not always sliding in one direction)

Question

Let me prefix this by saying how much I love this community here at stackoverflow, and its always a great help to browse and as questions here, so thanks a lot!

The problem. So I have a client that would like a slideshow that can slide the images from the right->to->left if the right navigation arrow is pressed and from left->to->right if the left arrow is pressed.

Currently in the configuration documentation for nivo-slider(its the only one I really ever use) I cant seem to get anything apart from either always sliding right or always sliding left (slideInLeft, slideInRight).

Is there anyway, to for instance, depict which is pressed, and run that animation method instead of the usual one?

Thanks in advance, Aleski.

Answer 1

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 2

I just noticed this question - I answered Chris's similar question and this solution should hopefully work for you as well:

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

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");
            }
    });

Answer 3

I fix this by putting following code in the nivoRun function of the jQuery.nivo.slider.js file (just after the currentEffect variable is initialised) :

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

This code creates your own effect called slideInLeftRight.

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 like this:

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