testimonial-carousel.html

<style type="text/css">

	div.testimonial-carousel-container {
		width: 100%;
	}

	div.testimonial-slide-container {
		display: none;
		font-size: smaller;
		align: left; 
	}

	div.carousel-slide {
		border: 0;
		padding: 0;
		margin: 0;

	}

	div.carousel-slide .attribution img {
		padding-left: 1em; 
		padding-right: 1em;
		border-left: 1px solid #ccd3d6;
		height: 4em; 
		width: auto;	
	}

	div.carousel-slide p { 
		margin: 0; 
		font-style: italic; 
		padding-bottom: 0.25em; 
	}

	div.carousel-slide .attribution .readable { margin-right: 1em; }

	div.carousel-slide .attribution { 
		color: #647782; 
		text-align: right; 
		font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif; 
		font-weight: 700; 
		text-transform: uppercase; 
		font-size: 0.75em; 
		display: flex; 
		justify-content: flex-end; 
		margin-top: 1em; 
	}

</style>

<h3>
	Hear what people have to say about OpenSearch...
</h3>


<div class="testimonial-carousel-container">

	{% assign filter_testimonial = site.testimonials %}
	{% for testimonial in site.testimonials | where: "featured","true" %}
	<div class="testimonial-slide-container" id="slide{{ forloop.index0 }}"
		{% if forloop.first %}
			style="display: inline;"
		{% endif %}
		>
		{% include testimonial-carousel-slide.html testimonial=testimonial %}
	</div>
	{% endfor %}
</div>

<script>
	
	setInterval(function() {
		thingies = jQuery(".testimonial-slide-container");
		for(i = 0; i < thingies.length; i++)
		{
				if($("div#slide" + i).is(":visible"))
				{
						$("div#slide" + i).slideUp("slow");
						$("div#slide" + ((i + 1) % thingies.length)).slideDown("slow");
						break;
				}
		}
	}, 20000);

</script>