SO jQuery Fiddle

Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5

by Nick Craver

HTML

<script src="http://onur.mayanet.com.tr/test/jquery.cycle.all.min.js"></script>
<div class="container">

<div class="HoverTest">

    <div class="slideshow">

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />

    </div>

</div>

<div class="HoverTest">

    <div class="slideshow">

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />

    </div>

</div>

<div class="HoverTest">

    <div class="slideshow">

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />

    </div>

</div>

</div>

CSS

.slideshow {height: 232px; width: 232px; margin: auto; overflow:hidden; }
.slideshow img {padding: 15px; border: 1px solid #ccc; background-color: #eee; }
.nav {position:absolute; bottom:10px; right:10px;}
.nav a {text-decoration:none;}
.nav .activeSlide {text-decoration:underline;}
.HoverTest {width:300px; height:300px; background:yellow; position:relative; float:left; margin-right:10px;}

JavaScript

$(document).ready(function () {
        $(document).bind("keydown.scrollable", function (evt) {
            var key = evt.keyCode;       
            if (key == 37) {
        $('.slideshow').cycle('next');
            }        
            else if (key == 39) {
               $('.slideshow').cycle('prev');
            }
        });

        $('.slideshow').each(function() {
          $(this).before('<div class="nav"></div>').cycle({
            fx: 'scrollLeft',
            speed: 'fast',
            timeout: 350,
            pager: $(this).prev()
          });
        });
        $('.slideshow').cycle('pause');
        $(".container div:first-child").find(".slideshow").cycle('resume');
        $(".HoverTest").hover(
      function () {
          $(this).find(".slideshow").cycle('resume');
          $("#nav").click(function () {
             $('.slideshow').cycle('pause');
          });
      },
      function () {
          $('.slideshow').cycle('pause');
      }
    );
    });