Carousel - Media Template | Communifire Documentation

The Carousel - Media template displays content in a modern and clean carousel. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the Carousel - Media template in the Template tab

Template HTML

Below is the HTML of this template, for your reference.

<div class="axero-widget axero-widget-carousel-media axero-widget-hide-header {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    <div class="axero-widget-header">
        <i class="icon-exclamation-sign"></i>
        <h3>Menu</h3>
    </div>
    <div class="axero-widget-content">
        <div class="carousel carousel-fade slide" id="myCarousel-{{WidgetID}}">
            <ol class="carousel-indicators"></ol>
            <div class="carousel-inner">
                {{#each Contents}}
                    <div class="row-fluid item">
                        <div class="span4">
                            <a title="{{{Title}}}" href="{{ContentURL}}"><img src="{{ContentImageURL}}" alt="{{{Title}}}" /></a>
                        </div>
                        <div class="span8">
                            <div class="carousel-caption">
                                <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a> <i class="icon-angle-right"></i></h4>
                                <p>{{{Summary}}}</p>
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}{{#if ../CommentsEnabled}}&nbsp;&nbsp;&middot;&nbsp;&nbsp;<i class="icon-comment"></i> {{CommentCount}}{{/if}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                 {{/each}}
            </div>
            <a data-slide="prev" href="#myCarousel-{{WidgetID}}" class="left carousel-control">&#8249;</a>
            <a data-slide="next" href="#myCarousel-{{WidgetID}}" class="right carousel-control">&#8250;</a>
        </div>

<script type="text/javascript">
    jQuery(function () {
        var html = '', carouselSelector = '#myCarousel-{{WidgetID}}', items = jQuery(carouselSelector).find('div.row-fluid.item'),
        carouselIndicators = jQuery(carouselSelector).find('ol.carousel-indicators');
        for (var i = 0, len = items.length; i < len; i++) {
            html = html + '<li data-target="' + carouselSelector + '" data-slide-to="' + i + '"></li>';
        }
        carouselIndicators.html(html);
        carouselIndicators.find('li:eq(0)').addClass('active');
        jQuery(carouselSelector).find('div.row-fluid.item:eq(0)').addClass('active');
        jQuery(carouselSelector).carousel({
            interval: 10000
        });
    });
    </script></div></div>