Revision #2

SharePoint: Custom Image Slider

You are currently reviewing an older revision of this page.

Go to current version

How to slide Image in SharePoint Page Using NIVO Slider Plugin, JQuery and SPServices.

In this case we are going to use Script Editor built-in Web Part for this purpose.

Download NIVO Slider from here
Extract nivo slider zip file and add following file to your site assets or any other document library which you use to store libraries. I prefer site assets
1. a. jquery.nivo.slider (JS File)
2. b. nivo-slider (CSS File)
Navigate to themes in Extracted Folder. Find bar, dark, default, light folder.
1. Open each folder copy arrows, bullets and loading gif and add it to picture library or any other library which you use for keeping pictures.
2. (Remember you can't keep more than one image with same name so will have to rename arrows, bullets and loading like arrowsbar , bulletsbar , loadingbar so on.. for each folder bar, dark, default, and light.)
3. Now open CSS of each folder bar, dark, default, and light find url and replace URL with respective gif url which you currently saved .
Add modified bar.css, dark.css, default.css and light.css to your site assets.
Add JQuery and SPServices library to your site assets.
Create Document Library named it CompanyPicture.
Add some pics to CompanyPicture document library (I am using Demo picture from Nivo-Slider demo).
8.Add Script Editor Web Part to your page.
1. Gearbox?Edit Page?Insert?Webart?Media and Content?Script Editor ? Add
Add reference of JQuery, SPServices, JQuery nivo slider, JQuery nivo, nivo-slider css, bar.css, dark.css, default.css, light.css which you have added in site assets to Script Editor Web Part.
Add below code to your Script Editor.

<link rel="stylesheet" href="http:// your site name /SiteAssets/nivo-slider.css"/>

<link rel="stylesheet" href="http:// your site name /SiteAssets/bar.css"/>

<link rel="stylesheet" href="http://your site name/SiteAssets/default.css"/>

<link rel="stylesheet" href="http://your site name/SiteAssets/dark.css"/>

<link rel="stylesheet" href="http://your site name/SiteAssets/light.css"/>

<script src="http://your site name/SiteAssets/jquery-1.11.3.min.js"></script>

<script src="http://your site name/SiteAssets/jquery.nivo.slider.js"></script

<script src="http://your site name/SiteAssets/jquery.SPServices-2013.js"></script>

<script type="text/javascript">

$(document).ready(function() {

loadImage();

});

function loadImage(){

$().SPServices({

operation: "GetListItems",

async: false,

webURL: _spPageContextInfo.webAbsoluteUrl, // or any other site url where your CompanyPicture document library reside.

listName: "CompanyPicture",

CAMLViewFields: "<ViewFields>"+

"<FieldRef Name=\'FileLeafRef\' />"+

"</ViewFields>",

completefunc: function (xData, Status) {

$(xData.responseXML).SPFilterNode("z:row").each(function(){

var FileLeafRef = $(this).attr("ows_FileLeafRef");

var splitdata = FileLeafRef.split("#");

var splitdataneed = splitdata[1];

var addlist = "<a><img src=\"http://your site name/CompanyPicture/"+splitdataneed+"\" /></a

>";

$("#slider").append(addlist);

});

$('#slider').nivoSlider({

effect: 'random',

slices: 15,

boxCols: 8,

boxRows: 4,

animSpeed: 500,

pauseTime: 3000,

startSlide: 0,

directionNav: true,

controlNav: true,

controlNavThumbs: false,

pauseOnHover: true,

manualAdvance: false,

prevText: 'Prev',

nextText: 'Next',

randomStart: false,

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){},

lastSlide: function(){},

afterLoad: function(){}

});

}

});

}

</script

<div id="wrapper">

<div class="slider-wrapper theme-default">

<div id="slider" class="nivoSlider">

</div>

Check your site.