Advanced Templates

DOM Method

This first example shows how to use the DOM API within a template:

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-pager="#pager1"
    data-cycle-pager-template="<a href=# ><img src='{{firstChild.src}}' width=20 height=20></a>"
    data-cycle-slides=">div"
    data-cycle-update-view=-1
    >
    <div><img src="images/beach1.jpg" width=200 height=200></div>
    <div><img src="images/beach2.jpg" width=200 height=200></div>
    <div><img src="images/beach3.jpg" width=200 height=200></div>
</div>
<div class="cycle-pager" id="pager1"></div>

Note that in the example above, firstChild.src works because the images are the first child nodes of the div slides. If there had been whitespace between the div and image, like this:

...
<div>
    <img src="images/beach1.jpg" width=200 height=200>
</div>
...

then the firstChild node of the div would be a text node and this technique would have failed. To solve that problem we can rewrite the template using an alternative DOM API traversal:

data-cycle-pager-template="<a href=# ><img src='{{children.0.src}}' width=20 height=20></a>"

and the src attribute of the first element child will be used.

Custom API Method

This example shows how to add a new method to Cycle2's API and access it within a template.

<div class="cycle-slideshow" 
    data-cycle-timeout=0
    data-cycle-pager="#pager2"
    data-cycle-pager-template="<a href=# ><img src='{{API.customGetImageSrc}}' width=20 height=20></a>"
    data-cycle-slides=">div"
    >
    <div><p><img src="<?= $imagePath ?>/images/beach1.jpg" width=200 height=200></div>
    <div><p><img src="<?= $imagePath ?>/images/beach2.jpg" width=200 height=200></div>
    <div><p><img src="<?= $imagePath ?>/images/beach3.jpg" width=200 height=200></div>
</div>
<div class="cycle-pager" id="pager2"></div>

<script>
// bind to C2's bootstrap event in order to get a reference to the API object
$('.cycle-slideshow').on('cycle-bootstrap', function(e, opts, API) {
    // add a new method to the C2 API:
    API.customGetImageSrc = function( slideOpts, opts, slideEl ) {
        return $( slideEl ).find('img').attr('src');
    }
});
</script>