Carousel List-view in a SharePoint-hosted App

(function () {
// Initialize the variable that store the objects.
var overrideCtx = {};
overrideCtx.Templates = {};

var appWeburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

// Override the default title with user input
// ctx.ListTitle = prompt("Type a title", ctx.ListTitle);
loadjscssfile(appWeburl + "/css/style.css", "css") ////dynamically load and add this .css file
loadjscssfile(appWeburl + "/css/anythingslider.css", "css") ////dynamically load and add this .css file
loadjscssfile(appWeburl + "/css/orange.css", "css") ////dynamically load and add this .css file

// Assign functions or plain html strings to the templateset objects:
// header, footer and item.
overrideCtx.Templates.Header = "<article id='anything-slider'><div class='shadow-top'></div>";
overrideCtx.Templates.Header += "<section id='slider-container'><ul id='slides'>";

// This template is assigned to the CustomItem function.
overrideCtx.Templates.Item = customItem;

overrideCtx.Templates.Footer = "</ul></section><div class='shadow-bottom'></div></article>";

// Set the template to the:
// Custom list definition ID
// Base view ID
overrideCtx.BaseViewID = 2;
overrideCtx.ListTemplateType = 10057;

// Assign a function to handle the
// PreRender and PostRender events
overrideCtx.OnPreRender = preRenderHandler;
overrideCtx.OnPostRender = postRenderHandler;

// Register the template overrides'
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

// This function builds the output for the item template,
// it uses the context object to access announcement data.
function customItem(ctx) {

// Build a listitem entry for every announcement in the list.
var ret = "<li class='panel1'>";
ret += "<section class='slide-elements'>";
//ret += "<div class='slide-img-container'>";
//ret += "<img src='img/slider/slider.jpg' alt='Slider Image 1'>";
//ret += "<div class='slider-img-shadow'></div></div>";
ret += "<h3>" + ctx.CurrentItem.Title + "</h3>";
ret += "<p>" + ctx.CurrentItem.Body + "</p>";
ret += "</section></li>";

return ret;

}

// The preRenderHandler handles the
// OnPreRender event
function preRenderHandler(ctx) {
}

// The postRenderHandler handles the OnPostRender event
function postRenderHandler(ctx) {

// You can manipulate the DOM
// in the postRender event
var ulObj;
var i, j;

ulObj = document.getElementById("slides");

// Reverse order the list
for (i = 1; i < ulObj.children.length; i++) {
var x = ulObj.children[i];
for (j = 1; j < ulObj.children.length; j++) {
var y = ulObj.children[j];
if (x.innerText < y.innerText) {
ulObj.insertBefore(y, x);
}
}
}
}

function loadjscssfile(filename, filetype) {
if (filetype == "js") { //if filename is a external JavaScript file
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype == "css") { //if filename is an external CSS file
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}

// Function to retrieve a query string value.
// For production purposes you may want to use
// a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}