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

18 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai .

    ReplyDelete
  2. I appreciate that you produced this wonderful article to help us get more knowledge about this topic.
    I know, it is not an easy task to write such a big article in one day, I've tried that and I've failed. But, here you are, trying the big task and finishing it off and getting good comments and ratings. That is one hell of a job done!



    Selenium training in bangalore
    Selenium training in Chennai
    Selenium training in Bangalore
    Selenium training in Pune
    Selenium Online training

    ReplyDelete
  3. Great content thanks for sharing this informative blog which provided me technical information keep posting.
    python Training in Chennai
    python Training in Bangalore
    python Training in Pune

    ReplyDelete
  4. I am happy for sharing on this blog its awesome blog I really impressed. thanks for sharing.

    Learn SAP Training from the Industry Experts we bridge the gap between the need of the industry. Softgen Infotech provide the Best SAP ABAP Training in Bangalore with 100% Placement Assistance. Book a Free Demo Today.

    ReplyDelete
  5. Really i appreciate the effort you made to share the knowledge. The topic here i found was really effective...

    Looking for SAP HANA ADMIN Training in Bangalore, learn from eTechno Soft Solutions SAP HANA ADMIN Training on online training and classroom training. Join today!

    ReplyDelete
  6. Such a great information for blogger i am a professional blogger thanks…

    Softgen Infotech is a leading training institute for all kind of the Best Software Training in Bangalore with real-time experienced trainers with 100% Placement Assistance.

    ReplyDelete
  7. Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, you have insured so many corners..keep it up!!

    android training in chennai

    android online training in chennai

    android training in bangalore

    android training in hyderabad

    android Training in coimbatore

    android training

    android online training


    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This post is so interactive and informative.keep update more information...
    Azure Training in Bangalore
    Microsoft Azure training in Bangalore

    ReplyDelete