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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
See demo-slideshow.css for the pager styles that are being applied in this demo.
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="/images/p1.jpg"> <img src="/images/p2.jpg"> <img src="/images/p3.jpg"> <img src="/images/p4.jpg"> </div> <div class="example-pager"></div>
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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/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.
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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div id=adv-custom-pager class="center external"></div>
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="/images/p1.jpg" data-cycle-pager-template="<a href=#>Spring</a>">
<img src="/images/p2.jpg" data-cycle-pager-template="<a href=#>Trees</a>">
<img src="/images/p3.jpg" data-cycle-pager-template="<a href=#>Water</a>">
<img src="/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>
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="/images/p1.jpg">
<img src="/images/p2.jpg">
<img src="/images/p3.jpg">
<img src="/images/p4.jpg">
</div>
<div id=no-template-pager class="cycle-pager external">
<!-- using thumbnail image files would be even better! -->
<img src="/images/p1.jpg" width=20 height=20>
<img src="/images/p2.jpg" width=20 height=20>
<img src="/images/p3.jpg" width=20 height=20>
<img src="/images/p4.jpg" width=20 height=20>
</div>
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>