0

I have a page with a set of images, each with a unique ID ("Main-1", "Main-2" etc) contained in a white-space:nowrap div, so the page scrolls horizontally.

I would like a way of cycling through these images using the left and right arrow keys (preferably using a scroll animation, I am currently using scrollTo() in the currently existing straightforward navigation links).

I have found this for vertically-scrolling websites, but can't seem to find a horizontal equivalent (and my JS isn't great, so my attempts to convert the vertical code to my horizontally scrolling page has failed miserably!).

This JFiddle does exactly what I want, but for a vertically scrolling site: http://jsfiddle.net/aVvQF/4/ ..... can anyone help me convert this to use with horizontal scrolling?

Thanks !

user2634764
  • 115
  • 1
  • 1
  • 7

1 Answers1

0

Since you have the code that already works, it was very easy to adapt.

Check out this JSFiddle that works horizontally instead of vertically

$('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);

Is replaced by

$('html, body, #placeholder').clearQueue().animate({scrollLeft: $targetElement.offset().left }, 1000);

As you see, I also adjusted the placeholder div and added an id selector.

Do note that this only works with the up and down arrow keys, I don't want to do all your work :)

NDM
  • 6,731
  • 3
  • 39
  • 52
  • Thanks - I've realised there's an extra problem though which makes this particularly complicated, because I want to continue to allow smooth scrolling. So I actually need to find some Javascript that can detect where the browser window is and what it should scroll to next... Eeek! – user2634764 Aug 04 '13 at 13:06