Cycle2 Pagers

Simple

You can add a simple, default pager by including an empty div in your slideshow container with the class cycle-pager.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <!-- empty element for pager links -->
    <div class="cycle-pager"></div>

    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

See demo-slideshow.css for the pager styles that are being applied in this demo.

Multiple Pagers

The data-cycle-pager option identifies the element(s) to use as the pager link container. By default, this option's value is > .cycle-pager. This is a jQuery selector string which selects all immediate child elements of the slideshow container that have the class cycle-pager. To have multiple pagers you can set the value of this option to a selector string which identifies each of the pager containers for your slideshow.

<div class="example-pager"></div>
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-pager=".example-pager"
    >
    <!-- empty element for pager links -->
    <div class="cycle-pager"></div>
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>
<div class="example-pager"></div>

Hover Event

By default, pager links must be clicked in order to be activated. This can be changed by overriding the pager-event option. For example, set data-cycle-pager-event to mouseover in order to active links on hover.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager-event="mouseover"
    >
    <!-- empty element for pager links -->
    <div class="cycle-pager"></div>
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>

Custom Template

Pager links are created using the template string found in the pager-template option. The default value for that option is '<span>•</span>' as can be seen in the examples above.

To override the default and create custom pager links simply declare a data-cycle-pager-template attribute and set its value to your desired template string. Template strings support a Mustache-style syntax by default. For example, to create pager links that are numbered to match each slide you can do the following:

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#custom-pager"
    data-cycle-pager-template="<strong><a href=#> {{slideNum}} </a></strong>"
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div id="custom-pager" class="center"></div>

Within your template string you can access any of the state properties or metadata stored on the slide itself.

Note also that in this example the pager container is outside the slideshow and is referenced using the data-cycle-pager option.

Advanced Custom Template

This example shows how to pull values from the slide elements themselves. In this case, we're accessing the slide's src property in order to build a thumbnail for the pager link.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#adv-custom-pager"
    data-cycle-pager-template="<a href='#'><img src='{{src}}' width=20 height=20></a>"
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div id=adv-custom-pager class="center external"></div>

Per-Slide Template

This example shows how the data-cycle-pager-template attribute can be used on the slide instead of the container. This allows the slide's pager template to be explicity declared on in the slide itself.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#per-slide-template"
    >
    <img src="https://malsup.github.io/images/p1.jpg" data-cycle-pager-template="<a href=#>Spring</a>">
    <img src="https://malsup.github.io/images/p2.jpg" data-cycle-pager-template="<a href=#>Trees</a>">
    <img src="https://malsup.github.io/images/p3.jpg" data-cycle-pager-template="<a href=#>Water</a>">
    <img src="https://malsup.github.io/images/p4.jpg" data-cycle-pager-template="<a href=#>Sunset</a>">
</div>
<!-- empty element for pager links -->
<div id=per-slide-template class="center external"></div>

Existing Links (no template)

Another way to achieve the results of the earlier example is to use existing markup for the pager links. With this approach it is necessary to set the pager-template option to an empty string. The pager option identifies the pager container and the child elements of that container will become pager links.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-pager="#no-template-pager"
    data-cycle-pager-template=""
    >
    <img src="https://malsup.github.io/images/p1.jpg">
    <img src="https://malsup.github.io/images/p2.jpg">
    <img src="https://malsup.github.io/images/p3.jpg">
    <img src="https://malsup.github.io/images/p4.jpg">
</div>
<div id=no-template-pager class="cycle-pager external">
    <!-- using thumbnail image files would be even better! -->
    <img src="https://malsup.github.io/images/p1.jpg" width=20 height=20>
    <img src="https://malsup.github.io/images/p2.jpg" width=20 height=20> 
    <img src="https://malsup.github.io/images/p3.jpg" width=20 height=20> 
    <img src="https://malsup.github.io/images/p4.jpg" width=20 height=20>
</div>

Pager Fx

You can customize the effect used when paging by declaring the data-cycle-pager-fx attribute. The value of this attribute contains the transition name to be used for transitions that are initiated via pager controls. In the example below, the defaul transition effect is scrollHorz, however it is overriden to be scrollVert for pager-initiated transitions.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-pager-fx=scrollVert
    data-cycle-timeout=4000
    >
    <img src="<?= $imagePath ?>/images/p1.jpg">
    <img src="<?= $imagePath ?>/images/p2.jpg">
    <img src="<?= $imagePath ?>/images/p3.jpg">
    <img src="<?= $imagePath ?>/images/p4.jpg">
    <div class=cycle-pager></div>
</div>