Need help making a slideshow work on .click & .keypress


#1

Title says it all. I cannot figure out how to make my slideshow change on .click and .keypress, so far only on .click

var main = function () {
	$('.arrow-next').click(function () {
		var currentSlide = $('.active-slide');
		var nextSlide = currentSlide.next();
		if (nextSlide.length === 0) {
			nextSlide = $('.slide').first();
		}
		currentSlide.fadeIn(600).removeClass('active-slide');
		nextSlide.fadeOut(600).addClass('active-slide');
	});

	$('.arrow-prev').click(function () {
		var currentSlide = $('.active-slide');
		var prevSlide = currentSlide.prev();
		if (prevSlide.length === 0) {
			prevSlide = $('.slide').last();
		}
		currentSlide.fadeIn(600).removeClass('active-slide');
		prevSlide.fadeOut(600).addClass('active-slide');
	});
	$(document).keypress(function (e) {
	if (e.which == 39) {
		$(".arrow-next").trigger('click');
	}
});
}

$(document).ready(main);

#2

Hey Diego,

This is a great idea! Have you tried adding alert(e.which); inside your $(document).keypress(...); thing? So like this:

$(document).keypress(function(e) {
  alert(e.which);

  // ...
});

It's a useful tool to check if you're checking for the right thing and helps you know which sections of your code are OK and where the problem might be.

I've had a weird thing with if I'm using jQuery, the keycode was different than if I used pure JavaScript, which is why I recommend checking simple stuff like that :)