CarouFredSel carousel of testimonials
@*
This spits out a CarouFredSel list of testimonials. Posted 5/26/2016 so ensure you have the latest of everything.
Here's the CarouFredSel website
https://dev7studios.com/products/caroufredsel-wordpress-plugin/
You have to put the call the jQuery file in the head
Put in @section head {
the script stuff below
}
*@
<script type="text/javascript" src="/files/content/www/owlcarousel/jquery.caroufredsel-6.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#caro").carouFredSel({
auto: 7000,
scroll : {
items: 1,
pauseOnHover: true
},
pagination: {
container: "#pager",
keys: true
},
responsive: true,
prev: {
button: "#prev",
pauseOnHover: true
},
next: {
button: "#next",
pauseOnHover: true
}
});
});
</script>
@*
Now here's the code that calls the carousel.
This is calling a carousel of testimonials
*@
<div id="caro">
@BRT.Lister(tableId:"Content",viewId:"Testimonials",pageSize:10,fields: new[] {"Authors.PrimaryImage","Authors.FirstName","Authors.LastName","Summary","PubDate","PersonTitle","PersonName"},
sortFields: new SortFieldMeta[] {new SortFieldMeta() {FieldId = "PubDate", Descending = true}},itemTemplate:
@<div class="testimonial">
<div class="testimonial-meat">
@if(!item.IsDBNull("Authors") && @item.GetRecordList("Authors").Count > 0) {
if (item.GetRecordList("Authors")[0].GetFiles("PrimaryImage").Count==1) {
<img class="test-img img-circle" src="@item.GetRecordList("Authors")[0].GetFiles("PrimaryImage")[0].Url?width=90&height=90&mode=crop&vert=top&sat=70" />
}
}
<div>@item["Summary"]</div>
<div><b>@item["PersonName"], @item["PersonTitle"]</b></div>
</div>
<p><a href="/testimonials">View all testimonials →</a></p>
</div>)
</div>
<div class="clearfix"></div>