Search code examples
jqueryhovercyclejquery-cycle

hover on div 1 show cycle all slide 1, hover on 2 show cycle all slide 2

I've created a slideshow of testimonials, and above are 3 sections relating to 3 categories related to the slides.

So I have div1 and slide1, div2 and slide2, div3 and slide3.

I'm still pretty new to jquery—how would I say:

"hover this div1, pause cycle all on slide1"

 $('.section-testimonials').cycle({
    fx: 'fade',
    speed: 1000,
    containerResize: 0,
    timeout: 9000
});
Solution

  • Well those <div>'s just need to be placed as a Nav or Paging for jQuery cycle.

    NOTE** make sure you are using cycle-all FULL not LITE

    $('#slideshow').cycle({ 
    speed:       200, 
    timeout:     3000, 
    pager:      '#nav', // <-- point to the wrapper around your div's
    pagerEvent: 'mouseover', // <-- this causes the Pause (keeps it paused the whole time you're hovered)
    pauseOnPagerHover: true 
});​

    http://jquery.malsup.com/cycle/pagerHover.html