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:
The ideal image ratio for the Carousel Photo template is 3:2. Some good dimensions are
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">‹</a> <a data-slide="next" href="#myCarousel-{{WidgetID}}" class="right carousel-control">›</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>
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.
If you're experiencing issues with blurry images, refer to Troubleshooting Guide for Blurry Images for detailed steps to identify and resolve the problem.
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/axero-documentation/wiki/view/22687/carousel-photo-template
Your session has expired. You are being logged out.