Captions

Simple

You can add a simple, default caption by including an empty div in your slideshow container with the class cycle-caption. The default caption will display the current slide index and the total slidecount for the slideshow.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <!-- empty element for caption -->
    <div class="cycle-caption"></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 caption styles that are being applied in this demo.

Custom Template

Captions are created using the template string found in the caption-template option. The default value for that option is '{{slideNum}} / {{slideCount}}' as can be seen in the example above.

To override the default caption template and create custom captions simply declare a data-cycle-caption-template attribute and set it to your desired template string. Template strings support a Mustache-style syntax by default. For example, to create captions that are more verbose:

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-caption="#custom-caption"
    data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
    >
    <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 caption -->
<div id="custom-caption" class="center"></div>

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

Advanced Custom Template

This example shows how to combine slideshow data with external metadata stored on the slide element. Here our caption template references metadata stored on the element via a data-* attribute. The data-cycle-title attribute is not a standard Cycle option, but it can be added to the slide in order to reference it in our caption template via {{cycleTitle}} (camelCase). We could have chosen a different name for that attribute, for example data-title and accessed it accordingly, {{title}}.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-caption="#adv-custom-caption"
    data-cycle-caption-template="Slide {{slideNum}}: {{cycleTitle}}"
    >
    <img src="https://malsup.github.io/images/p1.jpg" data-cycle-title="Spring" >
    <img src="https://malsup.github.io/images/p2.jpg" data-cycle-title="Redwoods" >
    <img src="https://malsup.github.io/images/p3.jpg" data-cycle-title="Angle Island" >
    <img src="https://malsup.github.io/images/p4.jpg" data-cycle-title="Raquette Lake" >
</div>
<!-- empty element for caption -->
<div id="adv-custom-caption" class="center"></div>

Alt Captions

This example shows how to use an image's alt attribute for the caption.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-caption="#alt-caption"
    data-cycle-caption-template="{{alt}}"
    >
    <img src="https://malsup.github.io/images/p1.jpg" alt="Spring" >
    <img src="https://malsup.github.io/images/p2.jpg" alt="Redwoods" >
    <img src="https://malsup.github.io/images/p3.jpg" alt="Angle Island" >
    <img src="https://malsup.github.io/images/p4.jpg" alt="Raquette Lake" >
</div>
<!-- empty element for caption -->
<div id="alt-caption" class="center"></div>

More...

For more options, check out the animated caption/overlay demos.