How to add Image Slider Web Part in SharePoint 2013 Programatically ?

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”>
<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″ />
<td width=”540px” style=”vertical-align: top; padding-right: 10px”>
<h2><%# Eval(“Title”) %>
<p style=”color: #333″>
<%# Eval(“Description”) %>
PICURLDescription”) %>” class=”blueButton” style=”color: #fff”>Learn More
<td colspan=”2″>
<h2 style=”color: Orange”>
<%# Eval(“Title”) %>
<asp:Literal ID=”ltImage” runat=”server”></asp:Literal>
<img alt=”” src=”<%# Eval(“PICURL”) %>” width=”200px” />
<td valign=”top” style=”text-align:justify;padding-left:10px”>
<div class=”info”>
<%# Eval(“Description”) %>
<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 () {
animation: ‘slide’,
animationLoop: true,
itemWidth: 850,
itemMargin: 5,
pausePlay: false,
start: function (slider) {

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

Happy SharePointing 🙂 Hope it helps !!

Leave a Reply

Your email address will not be published. Required fields are marked *