In this article, we will see how to create Custom Image slider web part in SharePoint 2013 . Below are the source code to achieve the same.
<section class=”slider”>
flexslider” style=”height: 200px; background-color: #fff”>
<ul class=”slides”>
<asp:Repeater ID=”repeater” runat=”server”>
<ItemTemplate>
<li>
<table width=”850″ border=”0″ cellspacing=”15″ cellpadding=”15″>
<tr style=”vertical-align: top;”>
<td width=”300px”>
<img src=”<%# Eval(“PICURL”) %>” height=”180″ width=”300″ />
&nbsp;  
<td width=”540px” style=”vertical-align: top; padding-right: 10px”>
<h2><%# Eval(“Title”) %>
<p style=”color: #333″>
<%# Eval(“Description”) %>
</p>
<br>
PICURLDescription”) %>” class=”blueButton” style=”color: #fff”>Learn More
</td>
</tr>
</table>
</li>
<%–<div>
<table>
<tr>
<td colspan=”2″>
<h2 style=”color: Orange”>
<%# Eval(“Title”) %>
</h2>
</td>
</tr>
<tr>
<td>
<asp:Literal ID=”ltImage” runat=”server”></asp:Literal>
<img alt=”” src=”<%# Eval(“PICURL”) %>” width=”200px” />
</td>
<td valign=”top” style=”text-align:justify;padding-left:10px”>
<div class=”info”>
<%# Eval(“Description”) %>
</div>
</td>
</tr>
</table>
</div>–%>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</section>
</div>
<SharePoint:ScriptLink ID=”jsJQry” Name=”/js/jquery-1.11.3.min.js” Localizable=”false” runat=”server”>
<SharePoint:ScriptLink ID=”jsSlider” Name=”/js/slider/jquery.flexslider.js” Localizable=”false” runat=”server” >

<script type=’text/javascript’>
$(window).load(function () {
$(‘.flexslider’).flexslider({
animation: ‘slide’,
animationLoop: true,
itemWidth: 850,
itemMargin: 5,
pausePlay: false,
start: function (slider) {
$(‘body’).removeClass(‘loading’);
}
});
});
</script>

<script type=”text/javascript”>
$(‘img’).error(function () { $(this).hide(); });
$(‘img’).each(function () { this.src = this.src; });
</script>

Happy SharePointing 🙂 Hope it helps !!