majikdragon

# October 22, 2012 at 11:12 pm

Hi there,

We are using AnythingSlider for one of our projects and we are loading in slides dynamically using AJAX. Once the control has initially loaded, the immediate previous and immediate next slides are loaded in over AJAX. When the slider moves across to one of these slides, we add the previous/next slide and so on.

However, I am having a problem which is driving me absolutely nuts: how can I find out which direction the user has clicked?

For example, if I have records 1,2,3,4,5 and the slider is currently displaying record 4, how do I know whether the user has clicked the previous or next button? In other words, how do I know if they have navigated to slide 3 or slide 5?

This is something that I’ve been looking at for a couple of days now. I’ve tried binding to the onSlideComplete and the onSlideInit events and there appears to be no way of telling which direction the slider is moving. There is no explanation of the ‘e’ variable for the onSlideInit event, which is where I would have thought I could find an e.direction property or something.

I would highly appreciate it if you could get back to me as soon as possible as I’m having to hack the main source code with my own function calls to get it working! :(

Cheers,
Graham

majikdragon

# October 22, 2012 at 11:13 pm

Dammit! I meant to post this into the JavaScript Jungle forum!

If someone would be so kind as to move this thread :)

Mottie

# October 23, 2012 at 10:11 am

Hi majikdragon!

You can add this code to the slide init callback function:

// Callback when slide initiates, before control animation
onSlideInit: function(e, slider) {
var dir = slider.currentPage < slider.targetPage ? 'right' : 'left';
$(‘#direction’).html( dir );
}

This will work if the slider isn’t set up to work with infinite slides, as it appears to be in your case. Otherwise, when the slider wraps, it’ll show left instead of right when wrapping back around to the first slide.

Here is [a demo](http://jsfiddle.net/ycUB6/2172/) of it working.

Another option would be to bind to the forward and back arrows, so the direction is correct no matter how the options are set ([demo](http://jsfiddle.net/ycUB6/2173/)):

// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
slider.$wrapper.find(‘.back, .forward’).click(function(){
var dir = ($(this).hasClass(‘back’)) ? ‘left’ : ‘right’;
$(‘#direction’).html(dir);
});
}