Tuesday, May 17, 2016

JavaScript Slider for SharePoint List


This is the simple Image Slider for your decoration your home page in SharePoint. I found nice JavaScript Slider here. What I did, I managed to Integrated using Jquery and SPservices

Download three of them. Create document library and upload it. 
create a Custom List call "MySlider" (You can name it as you wish, But make sure put correct name on Script). and Create 4 Columns 
Title, Description, Link (Link to External or Any Link), Image (Link to Image)
It's better you make same size images. In my case, I made 630*300


<script type="text/javascript" src="/Jscript/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="/Jscript/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="/Jscript/pgwslider.min.js"></SCRIPT>
<link rel="stylesheet" href="/Jscript/pgwslider.min.css" />

<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "MySlider",

CAMLRowLimit: 4,
    CAMLViewFields: "<ViewFields></ViewFields>",
completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
var NewsTitle  = $(this).attr("ows_LinkTitle");
var NewsDec  = $(this).attr("ows_Description");
var NewsLink  = $(this).attr("ows_Link");
var NewsPic  = $(this).attr("ows_Image");



        var liHtml1 = "<li><img src='"+ NewsPic +"'" + " " + "alt='"+ NewsTitle +"'" + " " + "data-description='"+ NewsDec +"'  />" + "<a href='" + NewsLink + "'/>" + "</li>";

        $("#tasksUL").append(liHtml1);
      });
    }
  });
});
</script>
<ul id="tasksUL" class="pgwSlider"/>

<SCRIPT type=text/javascript>
$(document).ready(function() {
    $('.pgwSlider').pgwSlider();
});
</script>


That's it. Less talk and big job !!
Enjoy It