Static and rotating testimonial twig

testimonial_carousel.twig

<h3>Static Testimonials</h3>

{% set staticComments = su.collection( "comments" ).showcomment("yes").id2("Love Church").randomize.limit(3).find() %}

<ul class="site-comments-static">
	{% for comment in staticComments %}
		<li>
			"{{ comment.comment }}"{% if comment.credit %} — {{ comment.credit }}{% endif %}
		</li>
	{% endfor %}
</ul>

<h3>Rotating Testimonials</h3>

{% set comments = su.collection( "comments" ).showcomment("yes").id2("Love Church").find() %}

<ul class="site-comments">
	{% for comment in comments %}
		<li>
			"{{ comment.comment }}"{% if comment.credit %} — {{ comment.credit }}{% endif %}
		</li>
	{% endfor %}
</ul>

<script>
	
	
	var getNextIndex = function( nComments, commentsPerPage, previousIndex ) {
		var nextIndexCandidate = previousIndex + commentsPerPage;
		return ( nextIndexCandidate < nComments ) ? nextIndexCandidate : 0;
	}
	
	var getPageHeight = function( comments, commentsPerPage, i = 0 ) {
		var height = comments.slice( i, i + commentsPerPage ).toArray().reduce( function(height, e) {
			return height + jQuery(e).outerHeight( true );
		}, 0);
		
		var nextIndex = i + commentsPerPage;
		
		return nextIndex > comments.length ? height : Math.max( height, getPageHeight( comments, commentsPerPage, nextIndex ) );
	}
	
	var updateCommentVisibility = function( comments, commentsPerPage, i, animate = true ) {
		var duration = animate ? 400 : 0
		comments.fadeOut( duration ).promise().done(function() {
			comments.slice( i, i + commentsPerPage ).fadeIn( duration );
		});
	}
	
	var switchToNextPage = function( comments, commentsPerPage, i, interval ) {
		var nextIndex = getNextIndex( comments.length, commentsPerPage, i );
		
		console.log(nextIndex);
		
		updateCommentVisibility( comments, commentsPerPage, i );
		setTimeout( switchToNextPage, interval, comments, commentsPerPage, nextIndex, interval );
	}
	
	var setCommentsHeight = function( comments, commentsPerPage ) {
		height = getPageHeight( comments, commentsPerPage );
		jQuery( ".site-comments" ).css( "min-height", height );
	}
	
	var initCommentsPager = function() {
		var comments = jQuery( ".site-comments > li" ),
			commentsPerPage = 3,
			intervalSeconds = 10,
			interval = intervalSeconds * 1000;
		
		if ( comments.length <= commentsPerPage ) return;
		
		updateCommentVisibility( comments, commentsPerPage, 0, false );
		setCommentsHeight( comments, commentsPerPage );
		setTimeout( switchToNextPage, interval, comments, commentsPerPage, commentsPerPage, interval );
	}
	
	initCommentsPager();
</script>