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