Overlays

Simple

You can add a simple, default overlay by including an empty div in your slideshow container with the class cycle-overlay. The default overlay displays text found in the data-cycle-title and data-cycle-desc attributes on the slides.

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

    <img src="https://malsup.github.io/images/p1.jpg" 
        data-cycle-title="Spring" 
        data-cycle-desc="Sonnenberg Gardens">
    <img src="https://malsup.github.io/images/p2.jpg" 
        data-cycle-title="Redwoods" 
        data-cycle-desc="Muir Woods National Monument">
    <img src="https://malsup.github.io/images/p3.jpg" 
        data-cycle-title="Angel Island" 
        data-cycle-desc="San Franscisco Bay">
    <img src="https://malsup.github.io/images/p4.jpg" 
        data-cycle-title="Raquette Lake" 
        data-cycle-desc="Adirondack State Park">
</div>

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

Custom Template

Overlays are created using the template string found in the overlay-template option. The default value for that option is '<div>{{title}}</div><div>{{desc}}</div>' as can be seen in the example above. Values for the replacement tokens title and desc are extracted from the attributes of the slides.

To override the default overlay template and create custom overlays simply declare a data-cycle-overlay-template attribute and set its value to your desired template string. Template strings support a Mustache-style syntax by default. For example, to create overlays with even more information:

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-overlay-template="<span class=left>&nbsp;<br>{{slideNum}} / {{slideCount}}</span>{{date}} - {{title}}<br>{{desc}}"
    >
    <!-- empty element for overlay -->
    <div class="cycle-overlay custom"></div>

    <img src="https://malsup.github.io/images/p1.jpg" data-date="May, 2012"  data-title="Sonnenberg Gardens" data-cycle-desc="Sonnenberg Gardens">
    <img src="https://malsup.github.io/images/p2.jpg" data-date="June, 2012" data-title="Redwoods" data-cycle-desc="Muir Woods National Monument">
    <img src="https://malsup.github.io/images/p3.jpg" data-date="June, 2012" data-title="Angel Island" data-cycle-desc="San Franscisco Bay">
    <img src="https://malsup.github.io/images/p4.jpg" data-date="July, 2012" data-title="Raquette Lake" data-cycle-desc="Adirondack State Park">
</div>

Notice in this example that the data-cycle-title attribute shown in the earlier example has been shortened to just data-title and is then referenced with the {{title}} replacement token. These extra metadata attributes can be named however you wish.

More...

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