Carousel Banner Navigation Template | Communifire Documentation

Create a template for the Navigation Widget that displays links in a modern and clean carousel. You can use the Navigation widget to link to specific content, personal tools, external pages, and more.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. Enter Carousel Banner Navigation Item as the Template Name.
4. Select Button as the Widget Type.
5. In Resource Keys CSV, enter LearnMoreText.
6. In the editor, paste the following code.

<div class="item {{CustomCSSClass}}">
    <a href="{{Contents.URL}}">
    <div class="media">
        <img alt="{{{WidgetTitle}}}" src="{{Contents.ForegroundImageURL}}" />
    </div>
    <div class="carousel-caption">
        <div class="carousel-caption-inner">
            {{#if ShowWidgetHeader}}<h4>{{{WidgetTitle}}}</h4>{{/if}}
            <span class="xs-learn-more">{{{Resources.LearnMoreText}}}</span>
        </div>
    </div>
    </a>
</div>

7. Click Save Template.
8. Click Add a new template.
9. Enter Carousel Banner Navigation as the Template Name.
10. Select Navigation as the Widget Type.
11. Select Carousel Banner Navigation Item as the Link item template.
12. In the editor, paste the following code.

<div class="axero-widget axero-widget-carousel-banner-navigation axero-widget-hide-header axero-widget-no-border">
    <div class="axero-widget-content">
        <div class="carousel carousel-fade slide" id="myCarousel-{{WidgetID}}">
            <ol class="carousel-indicators hide"></ol>
            <div class="carousel-inner">
                {{{Contents.ChildWidgetHTML}}}
            </div>
            <a class="left carousel-control" href="#myCarousel-{{WidgetID}}" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel-{{WidgetID}}" data-slide="next">&rsaquo;</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: 10000
                });
            });
        </script>
    </div>
</div>

13. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

/*Styles for Carousel Banner Navigation*/
.axero-widget-carousel-banner-navigation .media {
    max-width: 30%;
}

.axero-widget-carousel-banner-navigation img {
    float: left;
    height: 150px;
    margin-top: 0% !important;
    object-fit: cover;
}

.axero-widget-carousel-banner-navigation .carousel .carousel-inner>.item .carousel-caption {
    background: none;
    margin-left: 30%;
    padding: 5% 2%;

}

.axero-widget-carousel-banner-navigation .carousel .carousel-inner>.item .carousel-caption h4 {
    text-shadow: none;
    font-size: 19px;
    line-height: 1.19048;
    font-weight: 600;
    color: black;
}

.axero-widget-carousel-banner-navigation .xs-learn-more {
    color: black;
}

.axero-widget-carousel-banner-navigation .item {
    background: white;
    height: 150px
}

.axero-widget-carousel-banner-navigation .carousel .carousel-control {
    opacity: .6;
    top: 60px;
}

.axero-widget-carousel-banner-navigation .xs-learn-more:after {
    font-family: var(--font-icon-family);
    content: "\f054";
    margin-left: 5px;
    font-weight: 900;
    font-size: 10px;
}

/*End styles for Carousel Banner Navigation*/

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page. 
3. Click the Widgets tab.
4. Drag a Navigation widget onto the page. This template is best used in wider columns - 6 or greater.
5. On the Navigation widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. In Navigation Items, configure an item. Example:
   
8. Click the Advanced tab for the navigation item.
9. Click Foreground image.
10. Upload an image.
11. Crop the image and click Save.
12. Save the navigation item.
13. Add more navigation items and configure them.
14. Click the Template tab.
15. Select the Carousel Banner Navigation template.
16. Click Save Widget.
17. Click Publish changes.
18. Click Go to page.