Return to Answer

Within the group (column), the next and previous slides can be found from the current one using jQuery's aptly named .next() and .prev(). So to go to the next slide (i.e. down on your site), you could do something like:

Anyway, these are just some ideas based on your chat with Tomalak and the site's HTML. There are obviously things that can be optimized (e.g. caching slide/group indices using .data()). Just consider it food for thought.

Within the group (column), the next and previous slides can be found from the current one using jQuery's aptly named .next() and .prev(). So to go to the next slide (i.e. "down" on your site), you could do something like:

Anyway, these are just some ideas based on your chat with Tomalak and the site's HTML. There are obviously things that can be optimized (e.g. caching slide/group indices using .data()). Just consider it food for thought.

Here's a simple jsfiddle just to demonstrate the DOM traversal stuff

var currentSlide = $(".slide.current"), 
    targetSlide  = currentSlide.next(".slide");
if(targetSlide.length === 0) {
  // no more slides in this group!
} else {
  currentSlide.removeClass("current");
  targetSlide.addClass("current";
}

(With your structure you can simply use .parent() instead of .closest(".group"), and .next() without a selector, but I'm being explicit/verbose to make things clearer)

var currentSlide = $(".slide.current"), 
    targetSlide  = currentSlide.next(".slide");
if(targetSlide.length === 0) {
  // no more slides in this group!
} else {
  currentSlide.removeClass("current");
  targetSlide.addClass("current");
}

(With your structure you can simply use .parent() instead of .closest(".group"), and .next() without a selector, but I'm being explicit/verbose to make things clearer. Included the pointless if-block for the same reason; you can obviously just do a !== comparison instead)

var currentSlide = $(".slide.current"), 
    targetSlide  = currentSlide.closest(".group").next(".group).find(".slide:first");
if(targetSlide.length === 0) {
  // no slides to move to!
} else {
  currentSlide.removeClass("current");
  targetSlide.addClass("current";
}

var currentSlide = $(".slide.current"), 
    targetSlide  = currentSlide.closest(".group").next(".group").find(".slide:first");
if(targetSlide.length === 0) {
  // no slides to move to!
} else {
  currentSlide.removeClass("current");
  targetSlide.addClass("current");
}