Custom Image Slider in SharePoint

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

I am going to use Script Editor built-in Web Part for this purpose.

1. Download NIVO Slider from here

2. 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

   a. jquery.nivo.slider  (JS File)

  b. nivo-slider  (CSS File)

3. Navigate to themes in Extracted Folder. Find bar, dark, default, light folder.

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.

(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.)

Now open CSS of each folder bar, dark, default, and light find url and replace URL with respective gif url which you currently saved .

4. Add modified bar.css, dark.css, default.css and light.css to your site assets.

5. Add JQuery and SPServices  library to your site assets.

6. Create Document Library named it CompanyPicture.

7. 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.

Gearbox-->Edit Page-->Insert-->Webart-->Media and Content-->Script Editor --> Add

9. 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.

10. 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>

     </div>

  </div>

 Check your site.

 

Feedback is highly appreciated.

Thanks

by Amir Reza via Everyone's Blog Posts - SharePoint Community