Carousel Photo Template | Axero Documentation

The Carousel Photo template displays content in a carousel that automatically cycles. The template is a built-in template and comes with your Axero platform. 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. 

Learn more

If you're experiencing issues with blurry images, refer to Troubleshooting Guide for Blurry Images for detailed steps to identify and resolve the problem.