CODEWITHSUNDEEP
jqueryhtmljquery-cycle
Liam Spencer
Liam Spencer

Reputation: 936

Next/Previous Slide on Button click with jQuery Cycle

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>

Upvotes: 1

Views: 1512

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26163

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');
    });
});

Upvotes: 1

Related Questions