Hello guys,
I'm currently working on a HTML page containing different slideshows using the great plugin jQuery Cycle. I don't have any problem to make them working on the same page with this code:
- $('.slideshow').each(function() {
- var $this = $(this);
- $this.cycle({
- speed: 600,
- timeout: 0,
- slideExpr: '.slide',
- slideResize: 0,
- next: $this,
- after: onAfter
- });
- });
- function onAfter(curr,next,opts) {
- var caption = ' ' + (opts.currSlide + 1) + ' / ' + opts.slideCount;
- $('.caption').html(caption);
- }
Each slider on the page is called .slideshow and I also use the "each" function to make them work without conflict. However I would like to assign to each one of these jQuery Cycle the keyboard arrow navigation (right & left for Next & Prev).
I've got this code which is working fine just for one slideshow on a page but if I use it for all of the sliders it fails the nav:
- $(document.documentElement).keyup(function (e) {
- if (e.keyCode == 39)
- {
- $(.slideshow).cycle('next');
- }
- if (e.keyCode == 37)
- {
- $(.slideshow).cycle('prev');
- }
- });
I hope someone could help me on that problem, I feel really lost... Thanks!!