Template Customization

This page demonstrates how Cycle2's default template regex can be replaced. The data-cycle-tmpl-regex attribute can be used to provide a custom regular expression for template tokenization. The default regex is {{((.)?.*?)}} which facilitates mustache-style template. However if you prefer not to use double curly braces you can provide your own expression as show in the examples on this page.

Also note that, if you wish, you can replace Cycle2's tmpl API method completely by binding to the cycle-bootstrap event:

// attach handler to bootstrap event
$( document ).on('cycle-bootstrap', function( e, opts, API ) {
    // replace default tmpl method in Cycle2 API
    API.tmpl = function( templateString, opts, contextElement ) {
        return str.replace(regex, function(_, str) {
            // custom tokenization (your code here)
            return opts[str] || contextElement[str];
        });
    }
});

[[slideNum]]

<div class="cycle-slideshow" 
    data-cycle-tmpl-regex="\[\[((\.)?.*?)\]\]"
    data-cycle-pager-template="<a href=#> [[slideNum]] </a>"
    ...

**slideNum**

<div class="cycle-slideshow" 
    data-cycle-tmpl-regex="\*\*((\.)?.*?)\*\*"
    data-cycle-pager-template="<a href=#> **slideNum** </a>"
    ...

%slideNum%

<div class="cycle-slideshow" 
    data-cycle-tmpl-regex="%((\.)?.*?)%"
    data-cycle-pager-template="<a href=#> %slideNum% </a>"
    ...