Next/Previous Slide on Button click with jQuery Cycle

Question

I'm no genius with jQuery, and wondering if someone can just give me a pointer as to what is wrong with this code I am using. The slider works but I need to go to the next and previous slides by pressing the left and right keys.

It could very well be an obvious mistake I have overlooked. At the moment, nothing happens when I press a key.

jQuery

        <script>
        $(function() {
            $('.slideshow').cycle({
                fx:'scrollHorz',
                easing:'easeInOutCirc',
                speed:700,
                timeout:5000,
                pager:'.slideshow_wrapper .slideshow-paging'
            });
            $('.slideshow_wrapper').mouseenter(function(){
                $('.slideshow').cycle('pause');
            }).mouseleave(function(){
                $('.slideshow').cycle('resume');
            }).keyup(function(e) {
            if(e.keycode == 37)
                $('.slideshow').cycle('prev');
            if(e.keycode == 39)
                $('.slideshow').cycle('next');
            })
        });
    </script>

HTML

<section id="gallery" class="slideshow_wrapper">
<div class="slideshow-paging"></div>
<div class="slideshow">
    <article class="slideshow_item">
        <div class='image'>
            <a href='#'>
                <img src='[URL HERE]' />
            </a>
        </div>
    </article>
</div>              

Answer 1

You've attached the keyup event handler to the slideshow wrapper, so that would need to have focus for the handler to be fired. Attach it to document instead. Also, use which instead of keycode...

$(function() {
    $('.slideshow').cycle({
        fx:'scrollHorz',
        easing:'easeInOutCirc',
        speed:700,
        timeout:5000,
        pager:'.slideshow_wrapper .slideshow-paging'
    });
    $('.slideshow_wrapper').mouseenter(function(){
        $('.slideshow').cycle('pause');
    }).mouseleave(function(){
        $('.slideshow').cycle('resume');
    })
    $(document).keyup(function(e) {
        if(e.which == 37)
            $('.slideshow').cycle('prev');
        if(e.which == 39)
            $('.slideshow').cycle('next');
    });
});

Also, depending on what version of jQuery you are using, you will probably be better off using on to assign event handlers...

$(function() {
    $('.slideshow').cycle({
        fx:'scrollHorz',
        easing:'easeInOutCirc',
        speed:700,
        timeout:5000,
        pager:'.slideshow_wrapper .slideshow-paging'
    });
    $('.slideshow_wrapper').on("mouseenter", function(){
        $('.slideshow').cycle('pause');
    }).on("mouseleave", function(){
        $('.slideshow').cycle('resume');
    })
    $(document).on("keyup", function(e) {
        if(e.which == 37)
            $('.slideshow').cycle('prev');
        if(e.which == 39)
            $('.slideshow').cycle('next');
    });
});