Owl Carousel of Features

@*
Put this in the <head>


<link href="/files/content/www/assets/owl.carouselfull.css" rel="stylesheet">


Need to also have jQuery and then call the Owl js file
<script type="text/javascript" src="/files/content/www/assets/owl.carousel.js"></script>


Below is the code that calls features that are set in a certain area.
Change up the value for the Area.Id


You can download the files from here:


http://brt-email.brtapp.com/files/central_assets/forcodesnippets/owl.carousel.min.js
http://brt-email.brtapp.com/files/central_assets/forcodesnippets/owl.carouselfull.css


*@


<!--============================-->
<!--CAROUSEL START-->
<!--============================-->
<div id="carousel-wrap">
    @BRT.Lister(tableId:"Content",viewId:"Features",fields: new[] {"Title","PrimaryImage", "Summary", "Link"}, savedFilters:new[] {"Visible"}, 
    condition: "<Eq FieldId=\"Area.Id\" Value=\"23498\"/>",
    template:
    @<text>
    <div id="home-carousel"  class="owl-carousel">
        @{ int i = 1; }
        @foreach(EngineRecord record in item) {
        <div class="copy-box-wrap">
            <a href="@record.GetString("Link")"><img src="@record.GetFiles("PrimaryImage")[0].Url?width=570&height=420&mode=crop" alt="" /></a>
            <div class="copy-box">
                <h3><a href="@record.GetString("Link")">@record.GetString("Title")</a></h3>
                @if (!record.IsDBNull("Summary")) {
                    <p class="hidden-xs">@record.GetString("Summary").Summarize(190)</p>
                } 
            </div>
            <div class="caro-count">
                @i
            </div>
        </div>
        i++;
        }
        
    </div>
    <div class="caro-total-count"><span id="startcaro">1</span> to <span id="endcaro">3</span> of @item.Count</div>    
    </text>)
    
</div>
<!--============================-->
<!--CAROUSEL END-->
<!--============================-->