Pause On Hover

Default

The typical use case for pausing a slideshow on a hover event is to pause when the mouse is over the slideshow. This is accomplished by setting the data-cycle-pause-on-hover attribute value to true.

<div class="cycle-slideshow" 
    data-cycle-fx=fadeout
    data-cycle-timeout=1000
    data-cycle-pause-on-hover="true"
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    ...
</div>

Specify an Element

To support pause-on-hover functionality for an element other than the slideshow itself you can set the value of the data-cycle-pause-on-hover attribute to a jQuery selector string which identifies an element (or elements). Cycle2 will then bind the hover logic to the specified element instead of the slideshow container.

<div id="pauser" class="info">Hover over me to pause 2nd slideshow</div>
<div class="cycle-slideshow" 
    data-cycle-fx=fadeout
    data-cycle-timeout=1000
    data-cycle-pause-on-hover="#pauser"
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    ...
</div>