Carousel with Sidebar Template | Communifire Documentation

The Carousel with Sidebar template displays content in a carousel with a scrolling sidebar 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 with Sidebar template in the Template tab

Template HTML

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

<div id="awesomeCarousel" class="carousel carousel-fade slide">
    <div class="carousel-inner">
        {{#each Contents}}
        <div class="item">
            <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
            <div class="carousel-caption">
                <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></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>
        {{/each}}
    </div>
    <div class="list-group-container">
        <ul class="list-group">
            {{#each Contents}}
            <li data-target="#awesomeCarousel" data-slide-to="{{@index}}" class="list-group-item">
                <div class="active-indicator"><i class="icon-caret-left"></i></div>
                <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
                <div class="item-info">
                    <h4>{{{Title}}}</h4>
                    <p class="more-info">{{DateCreatedString}} {{../Resources.GlobalByText}} <a class="axero-user-card-link" href="{{AuthorUserProfileURL}}" data-user="{{{AuthorUserID}}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a></p>
                </div>
            </li>
            {{/each}}
        </ul>
    </div>
    <div class="carousel-controls">
        <a class="left carousel-control" href="#awesomeCarousel" data-slide="prev">&#8249;</a>
        <a class="right carousel-control" href="#awesomeCarousel" data-slide="next">&#8250;</a>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    
    var clickEvent = false;
    $('#awesomeCarousel').carousel({
        interval:   10000	
	}).on('click', '.list-group li', function() {
			clickEvent = true;
			$('.list-group li').removeClass('active');
			$(this).addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!clickEvent) {
			var count = $('.list-group').children().length -1;
			var current = $('.list-group li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.list-group li').first().addClass('active');	
			}
		}
		clickEvent = false;
	});

    $('#awesomeCarousel').find('div.item:eq(0)').addClass('active');
    $('#awesomeCarousel').find('li.list-group-item:eq(0)').addClass('active');
});
</script>