Carousel Photo Template | Communifire Documentation

The Carousel Photo template displays content in a carousel that automatically cycles. 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 Photo template in the Template tab

The ideal image ratio for the Carousel Photo template is 3:2. Some good dimensions are

• 540 x 360
• 600 x 400
• 800 x 500

Template HTML

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

<div class="axero-widget axero-widget-layout 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="item">
                        <img src="{{ContentDetailImageURL}}" alt="{{{Title}}}" />
                        <div class="carousel-caption">
                            <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                            <p>{{{Summary}}}</p>
                        </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.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.item:eq(0)').addClass('active');
        jQuery(carouselSelector).carousel({
            interval: 5000
        });
    });
    </script></div></div>

Modifying The Template

This template can be modified to remove the Picture Title, Summary, Navigation Arrows, and Navigation Dots. To do so, modify the above code as follows:

Remove the Title and Summary: Delete the Blue highlighted code. 

Remove the Navigation Arrows: Delete the Amber highlighted code. 

Remove the Navigation Dots: Delete the Green highlighted code.

Removing all of these above sections will result in a Photo-Only widget that will rotate through your selected photos.