Image slideshow using document library in SharePoint 2013

1) How to genereate a image slideshow with using list in SharePoint 2013?
A) Concept:

backend: Sharepoint Documnet Library
Frontend animation: bxslider (js and Css)

Step -1:
Create a document library name it as: banners and add 3 images.

Step-2:
Create a sharepoint page and Insert banners list webpart.
After adding webpart. Go to webpart properties by edit properties.
In JS link give the paths of our CSR (JS file and bxslider.js file).

For example: ~site/Style Library/bx-slider.js|~site/Style Library/Generatebanner.js

Before we must add bxlider.js and its css files into style library.

Download those files at: http://bxslider.com/

Step-3:

Add CSR coding into our Generatebanner.js.

(function () {
loadCss(‘/sites/abc/Style%20Library/bxslider.css’);

function OnEventsViewPostRender(renderCtx) {
jQuery(document).ready(function(){

//write any jquery code if you want

});
}

function SliderscriptLoadSuccess(){}
function loadCss(url) {
var link = document.createElement(‘link’);
link.href = url;
link.rel = ‘stylesheet’;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}

function OnEventsViewPreRender(renderCtx) {
}
function RenderBannerPhotos(renderCtx) {

var listData = renderCtx.ListData;
if (renderCtx.Templates.Body == ”) {
return RenderViewTemplate(renderCtx);
}
var bannersliderHtml = ”;

bannersliderHtml += ‘

‘;

bannersliderHtml += ‘

‘;

for (var idx in listData.Row) {
var listItem = listData.Row[idx];

var title = listItem.Title;
var itemID = listItem.ID;
var imgURl = listItem.FileRef;
var redirectURL=listItem.Url;

bannersliderHtml += divHTML;

}

bannersliderHtml += ‘

‘;
bannersliderHtml += ‘</div>’;
return bannersliderHtml;
}

function RenderEventsViewBodyTemplate(renderCtx) {
if(renderCtx.ListTitle == “BannerPhotos”) {
return RenderBannerPhotos(renderCtx);
}
}
function _registerEventsViewTemplate() {

var eventsViewContext = {};

eventsViewContext.Templates = {};
eventsViewContext.Templates.View = RenderEventsViewBodyTemplate;
eventsViewContext.OnPreRender = OnEventsViewPreRender;
eventsViewContext.OnPostRender = OnEventsViewPostRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(eventsViewContext);
}
ExecuteOrDelayUntilScriptLoaded(_registerEventsViewTemplate, ‘clienttemplates.js’);

})();

5) Refresh the page you will get images sliding

For any queries feel free to contact me