next previous 37, 39

by Akram kamal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.js"></script>
<div id="slides" class="pics">
            <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
        </div>
<button id="prev">prev</button>
<button id="next">next</button>

JavaScript

$("#slides").cycle({
    fx: 'fade',
    pause: 6,
    prev: '#prev',
    next: '#next'
}).cycle("pause");
$("#slideshow").hover(function () {
    $("ul#nav").fadeIn();
},function () {
    $("ul#nav").fadeOut();
});
$(document).keydown(function(e){
    console.log(e.which)
    if (e.which == 37) $('#prev').click()
   else if (e.which == 39) $('#next').click()

    
})