Simple and Dynamic JQuery Slider For Sharepoint

Step 1

         Create One Picture Library to save image .(No extra columns are required)
         Create page in SharePoint designer.

Step 2

Apply master page from Menu for current page

Add Jquery reference as given below (these are online reference )

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>

Or you can download these libraries, and add local SharePoint server path instead of online path

Step 3:

Add div to show images (Place this code in Content area)

<div id="ImageSlider" style="height:300px; width:500px">  </div>

Now Place the Below Code in below the References of Jquery.

<script>

function GetData(Picture)

{

//change 1    full path pointing to your picture library

var imageURL = "http://site url /pictures/";

//change 2   

var itemURL = "http://sp2010-sana/Banners/Forms/DispForm.aspx?ID";

$(Picture.responseXML).find("z\\:row").each(function() {

  var title = $(this).attr("ows_Title");

  var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);

  var itemLink = itemURL+$(this).attr("ows_ID");

  var Html ="<img width='500' height='300'  src='"+ imageLink +"'/>";

        $("#BannerSlider").append(Html);

    });

$('#BannerSlider').cycle({

    fx:    'scrollLeft',

    sync:  true,

    delay: -10000

 });

}

 function PlaySlideshow()

{

 var srvCAML = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";

//Change 3 ---  put you picture library name in Listname tag

 srvCAML+= "<listName>Your Picture Library name </listName><query></query><viewFields> <ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/></ViewFields> </viewFields></GetListItems></soapenv:Body></soapenv:Envelope>";

//Change 4  ---change site url

var srvlists ="http://site url/_vti_bin/lists.asmx";

    $.ajax({ url: srvlists,type: "POST", dataType: "xml",data: srvCAML,complete: GetData,contentType: "text/xml; charset=utf-8",       

   

    });

}

PlaySlideshow();

</script>

Now make 4 changes according to your SharePoint site.

I have comment in code 4 four changes.

After this save change and preview this in browser.

This is simplest way to run Slider in SharePoint.